jquery menu hovering

Question

i have a menu that when i mouse over a div it will show and on mouse out it will fade out. the problem is that if you roll over any of the menu\'s children the menu will dis

Answer 1

Check out these nice examples:

Nice JQuery menus

A specific multilevel one:

Multilevel JQuery menu

HTML from link 2:

    

    
1 HTML
    
2 CSS
    
3 Javascript
        

            
3.1 jQuery
                

                    
3.1.1 Download
                    
3.1.2 Tutorial
                
            
            
3.2 Mootools
            
3.3 Prototype
        
    

CSS:

 #nav, #nav ul{
         margin:0;
         padding:0;
         list-style-type:none;
         list-style-position:outside;
         position:relative;
         line-height:1.5em;
     }

    #nav ul ul{
    top:auto;
    }

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

JS:

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
}

 $(document).ready(function(){
    mainmenu();
});