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