jQuery 主要导航问题

Question

我的“悬停关闭”功能有问题。在大多数情况下，完整的功能都有效。我可以悬停 <li>揭示底层<ul>如预期的。当用户将鼠标悬停在 <li> 上时，问题就出现了选择 child <ul>和链接。如您所见，“悬停”功能启动并否定了 child <ul> 的事实。在父级内 <li>

example of the issue: If you hover over the li and try to selecet the sub menu

我尝试了多种 CSS 定位和样式，并到达了这里:

nav {
   width:100%;
   height:50px;
   background:url(../assets/navBG.jpg) 0 0 repeat;
   position:relative;
   z-index:999;
}

ul.nav {
   list-style:none;
   position:absolute;
}

ul.nav li {
   float:left;
   font-family: 'PlayRegular';
   font-size:18px;
   color:#fff;
   padding:13px 43px;
   background:url(../assets/navIcon.png) center right no-repeat;
   cursor:pointer;
}

ul.nav li > ul {
   position:absolute;
   display:none;
   list-style:none;
   width:100%;
   height:auto;
   top:50px;
   left:0;
   overflow:hidden;
   background:#000;
 }

我已经使用 Jquery 来 slideDown 子 ul 但找不到一种方法让它可以“悬停”

$("ul.nav li").hover( function() {
    $(this).find("ul").slideDown({
        duration: 300,
        easing: "linear",
        queue: false        
    });
}, function() {
    $(this).find("ul").slideUp({
        duration: 300,
        easing: "linear",
        queue: false    
    });
});

我是不是漏了点什么给 child <ul>被视为 parent 的一部分<li> ？是 Jquery 还是 CSS 问题？我知道这不是 HTML 问题，因为我 100% 确定我写的语义正确，没有打开 <divs>

Answer 1

您的脚本在这里运行良好，DEMO http://jsfiddle.net/yeyene/4RxGf/1/

在这个demo中，jquery lib是v1.9.1，用这个版本测试你的站点？

$("ul.nav li").hover( function() {
    $(this).stop().find("ul").slideDown({
        duration: 300,
        easing: "linear",
        queue: false        
    });
}, function() {
    $(this).stop().find("ul").slideUp({
        duration: 300,
        easing: "linear",
        queue: false    
    });
});