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 vois pas pourquoi.

Il ne sert à rien de m'envoyer vers différents liens ou tutoriaux, je ne saurai pas les adapter.

Merci par avance pour votre aide


HTML

<div id="menu">

<li class="current"><a href="#">Accueil</a></li>
<li><a href="#">Qui sommes nous ?</a></li>
	<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>
<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>

CSS

#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; }