带有jQuery的子菜单无法正常工作

Question

My process:

I´m using jQuery for the hover effect, when I hover the mouse in list item I want to find for a submenu and then I use the fadeToggle effect.

Its like, When I hover my mouse it will look for children list items and if its displayed it will hide if its hidden it will display.

And I use the stop method to avoid some strange effects if people pass very fast over the menu over and over again.

My issue:

I think I thought correctly but unfortunately I´m having a issue.

The submenu items are appear behind other elements, behind the #banner-container, so the submenu items are not visible.

I have tried to play with the positions, but so far without success, does anyone know how to solve this problem?

My jsfiddle where you can see my problem:

http://jsfiddle.net/jcak/9EcnL/6/

html:

<nav id="menu">
    <ul>    
        <li><a href="index.html">Home</a>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </li>
        <li><a href="procuts.html">Procuts</a>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contacts</a></li> 
   </ul>
</nav>   

jQuery:

$('li').hover(function(){
    $(this).find('ul>li').stop().fadeToggle(300);
});

CSS:

#menu ul li ul li {display:none;}

#menu-container
{

    background:green;
    width:100%; 
    height:46px; 
    float:left;  
    z-index:7;
}

#menu
{
    width:960px; 
    height:auto; 
    margin:0 auto 0 auto;
}

#menu ul
{
    list-style-type:none;
}

#menu ul li 
{
    float:left; 
    height:46px;
    line-height:46px; 
    font-weight:300;

}

#menu ul li a
{
    text-decoration:none;
    color:#ccc;  
    display:block; 
    margin-right:5px; 
    height:46px; 
    line-height:46px; 
    padding:0 5px 0 5px;
    font-size:20px; 

}

#menu ul li a:hover
{
    color:#fff;
}

Answer 1

You probably want something like this, right?

http://jsfiddle.net/9EcnL/3/

Your javascript was fine, you just forgot to add in the jQuery library in the jsfiddle options. I put in some CSS to make it so that the submenus displayed a little better.

#menu ul li 
{
    display: inline-block;
    float:left; 
    height:46px;
    position: relative;
    line-height:46px; 
    font-weight:300;

}

#menu ul li a
{
    text-decoration:none;
    color:#ccc;  
    display:block; 
    margin-right:5px; 
    height:46px; 
    line-height:46px; 
    padding:0 5px 0 5px;
    font-size:20px; 

}

#menu ul li a:hover
{
    color:#fff;
}
#menu ul li ul {
    position: absolute;
    left: 0;
    -webkit-padding-start: 0;
    width: 300px;
}
#menu ul li ul li
{
    color:#fff;
}