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

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>

但是!我想要的东西，当我将鼠标悬停在我的“List Example #2”和“List Example Child #1”上时出现(在 CSS 中我将 display:none 放在它上面)即使我从它的父项中移出我的 coursor，它也会保持可见“列表示例#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;
}