Fernando M Domeneghetti

Estou começando agora a desenvolver pra WEB e ai ja viu? tem hora que trava e por mais que você mexe aqui, mexe ali e as coisas só pioram...

Eu criei um menu utilizando css para fazer toda estilização, só que me pediram para que o menu tivesse agora submenus e que toda vez que passar o mouse por cima do menu ele abriria o sub menu

estou tendo problemas para abrir o submenu, ele abre em cima do menu e esta perdendo toda configuração!
Se alguem puder me dizer aonde estou errando.. abaixo segue o código que estou fazendo para o popup e o menu que criei

css popup:
<style type="text/css">
#MenuPopUp{padding:0; top:0; z-index:10000;}
#MenuPopUp ul{list-style-type:none;}
#MenuPopUp a{text-decoration:none;}
#MenuPopUp a:hover{text-decoration:underline;}

#MenuPopUp{width:250px; border:1px solid #ccc; left:450px;}
#MenuPopUp li{position:relative; float:left;}
#MenuPopUp li a{display:block; height:25px; line-height:25px; color:White; background:#01458e; text-decoration:none;}
#MenuPopUp li a:hover{color:#ccc; text-decoration:none;}

#MenuPopUp li ul, #MenuPopUp li:hover ul{display:none; position:absolute; width:250px; top:0; left:450px; text-decoration:none; }
#MenuPopUp li:hover ul, #MenuPopUp ul li:hover ul{display:block; text-decoration:none;}
</style>

Código do menu
<div id="menu">
<ul id="menu_dropdown" class="menubar">
<li><a class="linkMenu" href= "default.aspx">HOME </a><img src="App_Themes/Theme/Image/seta.jpg" alt="Home" /></li>
<hr class="menu" />
<li><a class="linkMenu" href= "#">PRODUTOS </a> <img src="App_Themes/Theme/Image/seta.jpg" alt="Produtos" />
<ul style="display:none;" id="MenuPopUp" >
<li class="submenu"><a href="#">Decapador de cabos</a></li>
<hr class="menuPopUp" />
<li class="submenu"><a href="#">Ferramenta de inserção</a></li>
<hr class="menuPopUp" />
<li class="submenu"><a href="#">Cabo U/UTP, 4 pares, categoria 5e</a></li>
</ul>
</li>
<hr class="menu" />
<li><a class="linkMenu" href="InformacoesTecnicas.aspx">INFORMAÇÕES TÉCNICAS </a> <img src="App_Themes/Theme/Image/seta.jpg" alt="Informações Técnicas" /></li>
<hr class="menu" />
<li><a class="linkMenu" href="FaleConosco.aspx">FALE CONOSCO </a> <img src="App_Themes/Theme/Image/seta.jpg" alt="Fale Conosco" /></li>
<hr class="menu" />
<li><a class="linkMenu" href="FAQ.aspx">FAQ </a> <img src="App_Themes/Theme/Image/seta.jpg" alt="FAQ" /></li>
</ul>

<script type="text/javascript" src="http://ajax.googleap...n.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).find('ul:first').css('display', 'block');
}, function(){
$(this).find('ul:first').css('display', 'none');
});
});
</script>
</div>


Obrigado!!!