Menu déroulant

Bonjour,

J'avais un menu déroulant que j'ai souhaité modifié au niveau du look, mais les sous-menus ne veulent plus s'afficher verticalement.

Initialement:
www.cahue.net/wdvpts/html/menu_horizontal/

Et maintenant là où ça ne fonctionne plus:
www.cahue.net/wdvpts/html/menuHoriz/

<div id="nav">		
		<ul div="menu">
			<li class="current_page_item"><a href="index_emplode.html">Accueil</a>
			</li><!-- fin menu 1: Accueil -->
			<li><a href="blog_post.html">Blog Post</a>
					
			</li><!-- fin menu 2: -->
			<li><a href="style_demo.html">Style Demo</a>
				<ul class="menuDeroulant">
					<li><a href="#11">sous menu 3-1</a></li>
					<li><a href="#12">sous menu 3-2</a></li>
					<li><a href="#13">sous menu 3-3</a></li>
					<li><a href="#14">sous menu 3-4</a></li>
					<li><a href="#15">sous menu 3-5</a></li>
					<li><a href="#16">sous menu 3-6</a></li>
					<li><a href="#17">sous menu 3-7</a></li>
				</ul>
			</li><!-- fin menu 3: -->
			<li><a href="archives.html">Archives</a>
			</li><!-- fin menu 4: -->
			<li><a href="empty_page.html">Page Vide</a>
			</li><!-- fin menu 5: -->
		</ul>
		<!-- fin menuDeroulant -->	
		
		<div id="rss">
			<a href="http://www.cahue.net/feed/rss" title="Fil Rss des articles"><img src="css/img/ico_rss.png" alt="Fil des articles" width="16" height="16"/></a>
			<a href="http://www.cahue.net/feed/rss/commentaires" title="Fil Rss des commentaires"><img src="css/img/ico_rss.png" alt="Fil des commentaires" width="16" height="16"/></a>
		</div><!-- fin rss -->
		
		<div class="clearer">&nbsp;</div>
		
</div><!-- fin nav -->

et le css correspondant:

#nav {
	background: #958573 url('img/backgrounds.gif') repeat-x 0 -222px;
}
		
	/** --- début du menu de premier niveau --- */
		#nav ul  {
			display: inline;
		}
			#nav li {
			display: inline;
			}		
			#nav a {
				background: #958573 url('img/backgrounds.gif') repeat-x 0 -222px;
				border-right: 1px solid #AFA69C;
				color: #654;
				float: left;
				font: bold 1em Georgia,Tahoma,sans-serif;
				margin-right: 1px;
				padding: 10px 12px;
				text-align: center;
				text-decoration: none;
			}
			#nav li:first-child a {
				border-left: 1px solid #AFA69C;
			}
			#nav a:hover {
				background-position: 0 -294px;
				color: #543;
			}
			#nav li.current_page_item a {
				background-position: 0 -294px;
				color: #543;
			}
			/* --- début du menu déroulant --- */
				#menu .menuDeroulant   {		
					display: none;           
					position:absolute;
					list-style-type: none;  
					margin: 0;              
					padding: 0;
					border: 0;
				}
					#menu .menuDeroulant li   {    					
						margin: 0;
						padding: 0;
						border: 0;
						width: 140px;                			 
						border-top: 1px solid transparent;       
						border-right: 1px solid transparent;
					}
					#menu .menuDeroulant li a  {   
						display: block;
						color: #FFF;
						margin: 0;
						border: 0;
						text-decoration: none;       
						background-color:rgb(0, 0, 0);
						background-color:rgba(0,0,0,0.5);
					}
					#menu .menuDeroulant li a:hover   {    
						background-color: rgb(18, 89, 239);
						background-color: rgba(18, 89, 239, 0.8);
					}
					#menu .menuDeroulant li a:visited {        
						background-color:rgb(227, 22, 30);
						background-color:rgba(227, 22, 30, 0.5);
					}
					#menu li:hover > .menuDeroulant {
						display: block;
					}     
				/* --- fin du menu déroulant --- */

Merci d'avance