Menu com problema maldito

[Tatsui 0]

então galera, to fazendo um menu em css com submenu.

os problemas:

não consigo exibir o submenu quando passa o mouse com css.

depois tentei com jquery, deu certo, porém ele mostrava todos os submenus.

 

segue o código css do menu...

 

#menu ul{
margin:0px;
background:url(layout/sombra-menu.png) repeat-x bottom;
height:55px;
list-style:none;
}
#menu ul li{ border-right:#1660b3 1px solid; margin:0; position:relative; float:left;}
#menu ul li a{
padding-left:20px;
padding-right:20px;
height:55px;
float:left;
line-height:80px;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}
#menu ul li:first-child{ margin-left:-39px; }
#menu ul li:last-child{ border:0px; }
#menu ul li a:hover{
background:url(layout/sombra-menu.png) repeat-x bottom, #124d91;
cursor:pointer;
color:#FFF;
}
#menu ul li ul{
margin:0;
background:#1456a1;
list-style:none;
display:none;
width:100px;
height:auto;
position: absolute;
top:56px;
left:-1px;
z-index:9999;
}
#menu ul li ul li { border-bottom:0; margin-left:-39px; border-right:0px; width:100px;}
#menu ul li ul li a{
width:119px;
clear:both;
border-bottom:#1660b3 1px solid;
padding-right:0px;
}
#menu ul li a:hover #menu ul li ul {
display:block;
}

 

 

agora o html do menu...

 

    <div id="menu" class="left">
     <ul>
       <li>
         <a href="#">Inicio</a>
         <ul>
           <li><a href="index.php">Estatisticas</a></li>
           <li><a href="http://beontop.com.br/Bluepack/admin/?page=inicio">Editar</a></li>
         </ul>
       </li>
       <li>
         <a href="http://beontop.com.br/Bluepack/admin/?page=produto">Produtos</a>
         <ul>
           <li><a href="http://beontop.com.br/Bluepack/admin/?page=produto&secao=add">Adicionar</a></li>
           <li><a href="http://beontop.com.br/Bluepack/admin/?page=produto&secao=produtos">Editar</a></li>
           <li><a href="http://beontop.com.br/Bluepack/admin/?page=produto&secao=delProduto">Excluir</a></li>
         </ul>
       </li>
       <li><a href="http://beontop.com.br/Bluepack/admin/?page=sobre">Sobre Nós</a></li>
       <li>
         <a href="http://beontop.com.br/Bluepack/admin/?page=config">Configuração</a>
       </li>
     </ul>
   </div>

 

 

 

e eu usei o seguindo codigo jquery para fazer aparecer os submenus...

	$("#menu ul li a").hover(
	function () {
		$("#menu ul li ul li").slideDown();
	},
	function () {
		$("#menu ul li ul li").hide();
	}
);

 

 

Não sei o que está acontecendo, sempre fiz menu com submenu e sempre dava certo. Ja olhei mexi e re mexi no código várias vezes e ele não funciona.

 

Agradeço a ajuda desde já.

[William Bruno 1501]

no js você precisa usar o this:

                function () {
                       $( this ).next('ul').slideDown();
               },
               function () {
                       $( this ).next('ul').hide();
               }

 

pois você dá display: none; na UL e não nos LIs

 

 

e no css, seria:

#menu ul li:hover ul {
       display:block;
}