Problema menu desplegable jQuery y ajax

[charlidelta]

Hola a todos,

estoy creando un menu deplegable usando este javascript

Código PHP:

  <script type="text/javascript"> 
function mainmenu(){ 
$(" #nav ul ").css({display: "none"}); 
$(" #nav li").hover(function(){ 
    $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400); 
    },function(){ 
        $(this).find('ul:first').slideUp(400); 
    }); 
} 
$(document).ready(function(){ 
    mainmenu(); 
}); 
</script>  
  

y con esta estructura

Código PHP:

  <div id="menu"> 
                <ul id="nav"> 
                    <li><a href="#">Inicio</a></li> 
                    <li><a href="#">Servicios</a> 
                        <ul class="submenu"> 
                            <li><a href="#">Marketing</a> 
                                <ul class="subsubmenu"> 
                                    <li><a href="#">Precios</a></li> 
                                    <li><a href="#">Consultas</a></li> 
                                </ul> 
                            </li> 
                            <li><a href="#">Mercadotecnia</a></li> 
                            <li><a href="#">Encuestas</a></li> 
                        </ul> 
                    </li> 
                    <li><a href="#">Nosotros</a> 
                        <ul class="submenu"> 
                            <li><a href="#">Vision</a></li> 
                            <li><a href="#">Mision</a></li> 
                        </ul> 
                    </li> 
                    <li><a href="#">Otros</a></li> 
                    <li><a href="#">Contactanos</a></li> 
                </ul> 
            </div>  
   

Me funciona pero a media, me explico. Al pasar el raton por encima cambia bien de color el fondo del boton pero al irme hacia el submenu vuelve a su estado original.

Alguien me pordia indicar como solucionarlo? le he dado bastantes vueltas pero no lo consigo.
Aclaro que no soy un experto en javascript y lo que he echo ha sido leyendo y leyendo mas.

Aqui dejo el css del menu

Código PHP:

   
#nav { 
    list-style:none;  
} 
 
#nav li { 
    float:left;  
    background: #282728;  
} 
 
#nav li a {  
    display:block;  
    padding:7px 10px;  
    text-decoration:none;  
    color:#CCCCCC;  
    font-weight:bold;  
} 
 
#nav li a:hover {  
    color:#FC9000; 
    background: #EFF0F1; 
    -moz-border-radius: 10px 10px 0px 0px; 
    border-radius: 10px 10px 0px 0px; 
} 
 
#nav li a:active {  
    color:#FC9000; 
    background: #EFF0F1; 
    -moz-border-radius: 10px 10px 0px 0px; 
    border-radius: 10px 10px 0px 0px; 
} 
/* Submenu */ 
#nav ul.submenu {  
    border:1px solid #EFF0F1;  
    padding:5px; position:absolute;  
    list-style:none;  
    background-color:#EFF0F1; 
} 
#nav ul.submenu li {  
    float:none;  
    background-image:none;  
    border-bottom:1px solid #EFF0F1;  
    width:200px; 
} 
#nav ul.submenu li a { 
    color: #282728; 
    -moz-border-radius: 0px 0px 0px 0px; 
    border-radius: 0px 0px 0px 0px; 
} 
 
#nav ul.submenu li a:hover { 
    color: #FC9000; 
} 
 
/* Subsubmenu */ 
#nav ul.subsubmenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; margin-left:150px; margin-top:-30px;} 
#nav ul.subsubmenu li { float:none; background-image:none; border-bottom:1px solid #999999; min-width:200px;}