0

我的“悬停”功能有问题。在大多数情况下，完整的功能是有效的。我可以将鼠标悬停<li>以根据需要显示底层<ul>。当用户将鼠标悬停在<li>以选择子项<ul>和链接时，就会出现问题。如您所见，“悬停”功能启动并否定了孩子<ul>在父母中的事实<li>

问题示例：如果您将鼠标悬停在 li 上并尝试选择子菜单

我尝试了多种 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 合作，将孩子 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    
    });
});

我是否错过了让孩子<ul>被视为父母一部分的东西<li>？是 Jquery 还是 CSS 问题？我知道这不是 HTML 问题，因为我 100% 确定我写的语义正确，没有打开<divs>

4

1 回答 1

0

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

在这个演示中，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    
    });
});
于 2013-07-09T02:43:20.653 回答