Menu déroulant

Bonjour a tous
je voudrais faire un menu déroulant dans une autre avec html et css et je n'arrive pas a faire ça.
aider moi svp

voila mon code
<ul id="menu">
<li class="menu-item">
<a id="active" class="menu-link" href="./index.html">Accueil</a>
</li>
<li class="submenu noscript menu-item">
<a class="menu-link" > Etudiant</a>
<ul>
<li>
<a href="page d'inscription.php"> Inscription</a>
</li>
<li>
Notes
</li>
<li>
Emplois de temps
</li>
</ul>
</li>
<li class="submenu noscript menu-item">
<a class="menu-link" >Enseignant</a>
<ul>
<li>
Saisir notes
</li>
<li>
<a href='saisir cours.php'>Saisir cours</a>

</li>
<li>
Item 3
</li>
<li>
Item 4
</li>
<li>
Item 5
</li>

</ul>
</li>

<li class="submenu noscript menu-item">
<a class="menu-link" href="#">Télécharger </a>
<ul>
<li>
Développement
</li>
<li>
Création
</li>
</ul>
</li>
<li class="submenu noscript menu-item">
<a class="menu-link" >Admin</a>
<ul>
<li>
Saisir notes
</li>
<li>
Saisir cours
</li>
<li>
Annoncer
</li>
<li>
Valider insc
</li>
<li>
Item 5
</li>

</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="contact.html">Contact</a>
</li>
</ul>
----------------------------------------------------------------------------------------------
css

#menu {
margin: 0 auto;
padding: 0;
background: url(../images/menu_bg.gif) no-repeat;
font-weight: bold;
list-style: none;
z-index: 10;
top:116px;
position:absolute;
width:725px;
float: left;
}

#menu a {
text-decoration: none;
font-variant: small-caps;
color: #E0E0E0;
display: inline-block;
width: 100%;
}

#menu .menu-link:hover, #menu .menu-item:hover .menu-link {
background-color: #4C4C4C;
color: white;

}

#menu #active, #menu #active:hover {
background-color: #F2F2F2;
color: #363636;
}
.menu-item {
float: left;
margin: 1px 0 0 5px;
text-align: center;
width: 111px;
border: 2px ridge silver;
cursor: pointer;
line-height: 28px;
height: 28px;
overflow: visible;
font-size: 13px;
}
.menu-item:hover {
background-color: #F2F2F2;
color: black;
}
.noscript:hover {
border-bottom: none;
}

.menu-item li {
text-align: left;
padding-left: 10px;
}
.menu-item ul {
border: 2px ridge silver;
border-top: none;
margin: 0 -2px;
background-color: #F2F2F2;
list-style: none;
}
.noscript ul {
display: none;
padding: 7px 0 0;
width: 100%;
}

.noscript:hover ul {
display: block;
}

.script ul {
overflow: hidden;
padding: 0;
}

.submenu li:hover, li.hover {
background-color: #4C4C4C;
color: white;
}

.clear {
clear: both;
visibility: hidden;
}