Javascript 带有jquery的子菜单不能正常工作

我的流程：

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

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

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

我使用jQuery实现悬停效果，当我将鼠标悬停在列表项中时，我想找到一个子菜单，然后使用fadeToggle效果

它就像，当我将鼠标悬停时，它将查找子列表项，如果它显示，它将隐藏，如果它隐藏，它将显示

如果人们一次又一次地快速浏览菜单，我使用停止方法来避免一些奇怪的效果

我的问题：

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

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

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

我想我的想法是正确的，但不幸的是我有一个问题

子菜单项显示在其他元素后面、标题容器后面，因此子菜单项不可见

我曾经尝试过利用这些位置，但至今没有成功，有人知道如何解决这个问题吗

我的JSFIDLE，您可以在其中看到我的问题：

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

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

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

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>   

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

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

CSS:

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

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

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

---

你可能想要这样的东西，对吧

您的javascript很好，只是忘记在JSFIDLE选项中添加jQuery库。我加入了一些CSS，使子菜单显示得更好一些

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

---

谢谢…但我不明白，因为在我的html文件中，我导入了jQuery库，但不起作用…非常奇怪：我发现了问题，脚本正在工作，但问题是结果隐藏在我拥有的标题容器后面。你知道我怎么解决这个问题吗？我解决了这个问题，只不过是玩z指数而已……谢谢你，马特·迪曼特：）