javascript - StopPropagation() 不工作

Question

我正在编写一个多级下拉菜单，当父项悬停在其中时，子菜单会使用 JQuery fadeIn() 下拉。但是效果正在传播到子元素。当悬停时，它们也有 fadeIn()。代码是

HTML

<nav>
<ul id="headnav">
    <li> <a class="sliding-middle-out" href="index.php"> ABOUT </a> </li>
    <li> <a class="sliding-middle-out" href="practice.php"> PRACTICE </a> </li>
    <li> <a class="sliding-middle-out" href="research.php"> RESEARCH </a> 
        <ul>
            <li> <a href="papers.php"> Papers </a> </li>
            <li> <a href="articles.php"> Articles </a> </li>
            <li> <a href="phdstudents.php"> PhD Students </a> </li>
            <li> <a href="presentations.php"> Presentations </a> </li>
        </ul>
    </li>
</ul>
</nav>

JQuery

$(document).ready(function() { 
    $('nav > ul > li > ul').hide();
    $('nav > ul > li').hover(function() {
        $(this).find('ul').fadeIn(400);
    },function() {
        $(this).find('ul').fadeOut(400);
    }); 

});

CSS

nav {
    position: absolute;
    min-width:30%;
    float:right;
    right:12%;
    top: 16%;
  }

  nav ul li {
    display: inline-block;
    min-width: 20px;
    text-transform: uppercase;
  }

  nav ul li a{
    float: left;
    padding: 0px 10px 0px 10px;
  }

  nav ul li ul {
    display: inline-block;
    position: absolute;
    width: auto;
    margin-left:-35%;
    margin-top:7%;
  }

  nav ul li ul li {
    display: inline-block;
    min-width:10px;
  }

  nav ul li ul li a {
    color:#7f8c8d;
  }

当您将鼠标悬停在子元素上时，它们将再次fadeIn()。我尝试了 e.stopPropagation() 和 e.preventDefault() 但它们都不起作用。

请帮忙

Answer 1

悬停在外层 li 上时显示子菜单，但在离开内层 ul 时隐藏子菜单:

$('nav > ul > li').mouseenter(function(e) {
    $(this).find('ul').fadeIn(400);
});
$('nav > ul > li > ul').mouseleave(function() {
    $(this).fadeOut(400);
});

http://jsfiddle.net/mava7btt/3/