Question

我再次发布这个问题（希望这是正确的做法）。自从我最初发布这个问题以来，我已经能够更具体地认识到导致问题的原因（虽然我，我自己仍然无法弄清楚如何解决它......仍然是这个东西的新手）。

我已经设置了一个水平下拉菜单，其中包含非常标准的HTML和CSS：

HTML：

   <div id="nav-container">
      <nav id="menu-wrap">    
        <ul id="menu">
            <li><a href="/">Home</a></li>
            <li>
                <a href="">Categories</a>
                <ul>
                    <li>
                        <a href="">CSS</a>
                        <ul>
                            <li><a href="">Item 11</a></li>

                            <li><a href="">Item 12</a></li>
                            <li><a href="">Item 13</a></li>
                            <li><a href="">Item 14</a></li>
                        </ul>               
                    </li>
                    <li>
                        <a href="">Graphic design</a>

                        <ul>
                            <li><a href="">Item 21</a></li>
                            <li><a href="">Item 22</a></li>
                            <li><a href="">Item 23</a></li>
                            <li><a href="">Item 24</a></li>
                        </ul>               
                    </li>
          </ul>
       </ul>
   </nav>
</div>

CSS（太多了，无法在这里展示所有内容，但都非常标准）。这是我认为是问题的一部分）：

#menu li ul {
   display: none;
   position: absolute;
   left: 0;
   top: 100%;
   padding: 0; 
   margin: 0;
}

JQUERY：

$('#menu>li').hover(function(){
   $(this).closest('li').find('>ul').css({'opacity':0,'margin-       top':20}).show().animate({'margin-top':1,'opacity':1},300);
   },function(){
   $(this).find('>ul').fadeOut("slow");

});

子菜单（嵌套标签）在OK中显示动画，但不会按预期淡出。当鼠标移离菜单时，子菜单不会按照我的意愿淡出，它会立即消失。

我认为发生的事情是当鼠标从菜单中移开时，CSS（参见上面的代码片段）启动，覆盖jQuery，嵌套标签立即重置为display：none。 fadeOut（“慢”）函数没有机会发生。

任何人都可以告诉我如何将子菜单设置为在页面加载时不可见，但是当用户将菜单悬停在菜单上时会完全响应jQuery，以便子菜单生动并且也会淡化出??

感谢。

Answer 1

您将内部ul的top规则设置为100％，因此基本上当它显示它在当前渲染页面下方时，您将无法看到它。要解决此问题，您必须首先设置包含它的li（或任何一个，只要那个）display属性为relative。这样你的 ul 将相对于那个li绝对定位，并在顶部位置添加一个小偏移以正确放置它，就像这样

#menu li ul {
   display: none;
   position: absolute;
   left: 0;
   top: 20px;
   padding: 0; 
   margin: 0;
}
#menu li{
    position:relative;
}

您的 jq 可以保持不变，但我已经格式化并在淡入/淡出之前添加了stop（）方法

$('#menu>li').hover(function(){
       $(this).closest('li').
       find('>ul').
       css({'opacity': 0,'margin-top': 20}).
       show().
       stop().
       animate({'margin-top': 1,'opacity': 1}, 300);
   },function(){
       $(this).find('>ul').stop().fadeOut("slow");
   });

jsfiddle Demo

jQuery CSS下拉菜单

1 个答案: