Menu déroulant html css

Bonjour,

j'ai besoin d'aide pour adapter plusieurs codes que j'ai trouvé sur internet. Je n'y connais pas grand chose en HTML et CSS ce pourquoi je souhaite tomber sur une âme charitable qui pourrait m'aiguiller.

Mon but est de créer un menu déroulant sous ce que j'ai déjà effectué. Celui que j'ai ne fonctionne pas et je ne vois pas pourquoi.

Il ne sert à rien de m'envoyer vers différents liens ou tutoriaux, je m'y suis arraché les cheveux tout l'après midi et une bonne parti de la soirée, je n'arrive pas à adapter.

Merci par avance pour votre aide


HTML

<code>

<div id="menu">

<li class="current"><a href="#">Accueil</a></li>
<li><a href="#">Qui sommes nous ?</a></li>
<gras><ul class="menuderoulant">
<li><a href="#2">sous menu a</a></li>
<li><a href="#3">sous menu b</a></li>
<li><a href="#4">sous menu c</a></li>
</ul></gras>
<li><a href="#">Circuits</a></li>
<li><a href="#">L'Inde du sud</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>

</div>

</code>

CSS

<code>

#menu {
list-style-type: none;
border-top:#fff solid 5px;
background-color:#000033;
width:1000px; height:35px;
}

#menu li {
float:left;
left: 30px;
}

#menu li a {
display:block;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
margin-top:3px;
border-right: 10px solid #000033;
border-left: 10px solid #000033;
cursor:pointer;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
}

#menu li a:hover {
background-color:#98869c;
}

#menu li.current a {
background-color:#77b800;
}

#menu .menuderoulant
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position:absolute;
}
#menu .menuderoulant li
{
margin: 0;
padding: 0;
border: 0;
width: 140px;
}
#menu .menuderoulant li a
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menu .menuderoulant li a:hover
{
background-color: #eab;
}

#menu .menuderoulant li a:visited {
background-color: #9933CC;
}

#menu li:hover > .menuderoulant { display: block; }

</code>

Bonjour,

merci pour ta réponse mais du coup je me suis rabattu sur un autre code vu que je n'y arrive pas du tout.

C'est beaucoup moins joli mais il y a un semblant de fonctionnement.

J'espère pouvoir revenir dessus avant la fin de mon site.

Encore merci.

Pour info dès que je colle du <ul> il me place de point hors je mets bien la formule qui les efface et me déplace tout à partir du sous menu sans me le faire disparaître alors j'ai bien mis le "display:none;"

Une journée complète que je suis dessus, là je baisse les bras ou je vais vers l'AVC