Question

我在JS方面并不是很好，但我认为唯一一个可以帮助解决我的问题。我也有子菜单的子菜单。很简单：

<div class="dr_nav">
<ul>
<li><a href='#'>HOME</a>
<ul>
   <li><a href='#'>List Example #1</a></li>
   <li><a href='#'>List Example #2</a>
       <ul>
          <li> <a href='#'>List Example Child #1</a> </li>
       </ul>
   </li> 
<li><a href='#'>List Example #3(hover)</a></li>
</ul>
</li>
</ul>
</div>

BUT！我想要的东西，当我将鼠标悬停在我的“列表示例＃2”和“列表示例子＃1”上时（在CSS中我将display：none添加到它中）它即使我从其父项中移出我的游标也会保持可见“列出示例＃2”。我希望有人可以帮助我。

我的CSS有点难以理解：

.dr_menu
{

    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 999;
}

.dr_menu>ul
{

    margin: 0;
    padding: 0;
    text-align: center;
}

.dr_menu>ul>li
{

    display: inline-block;
    padding: 0 0 10px 0;
    margin-right: 40px;
}

.dr_menu>ul>li:last-child
{

    margin:0;
}

.dr_menu ul li>ul
{

    display: none;
    position: absolute;
    left: 0;
    background-color: white;
    margin: 0;
    padding-top: 10px;
    top: 100%;
    -webkit-padding-start: 0px;
    width: 1400px;
}

.dr_menu ul li ul li, .dr_menu ul li ul li a
{

    padding: 10px 0px 10px 30px;
    text-align: left;

}
.dr_menu ul li ul li a
{

    display: block;
    width: 770px;
    color: #A0A0A0;
    margin-left: 300px;
}

.dr_menu ul li ul li ul
{

    display: none; 
    padding: 0;
    position: relative;
    padding-top: 20px;
}

.dr_menu ul li ul li ul li a
{

        margin-left: 330px;
        width: 740px;
}
.dr_menu ul li ul li ul li 
{

        padding: 0;
}

.dr_menu a
{

        text-decoration: none;
        color: #A0A0A0;
}

.dr_menu>ul>li>ul>li
{

    padding-left: 0;
}

.dr_menu ul>li:hover
{

    background-image: url('./img/nav_copy.png');
    background-position: bottom;
    background-repeat: no-repeat; 
}


.dr_menu ul>li>a:hover
{

    color: white;
}

.dr_menu ul li a:hover
{

    color: white;
}

.dr_menu>ul>li>ul>li:last-child
{

    margin-bottom: 30px;
}

.dr_menu li:hover>ul
{

    display: block;
    color: white;
}

.dr_menu ul li ul li a:hover
{

    background-color: #A0A0A0;
    color: black;
}

这是mu JS：

jQuery(document).ready(function(){
$('#child').mouseleave(function() {$('#child').show()},  false);
}

Answer 1

您可以使用 CSS 创建菜单：

Demo Fiddle

.dr_nav li:hover>ul{
    display:block;
}
.dr_nav li>ul{
    display:none;
}

当鼠标离开<li> </li>时，子菜单CSS下拉菜单会在CSS下拉菜单中消失

1 个答案:

Demo Fiddle