Question

我有以下下拉菜单：

<div id="header">
  <div class="container">
    <ul class="navigation">
      <li>
        <a href=""></a>
        <ul class="sub-menu">
          <li></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

#header .navigation {
    float: right;
    margin: 15px 0 0;
    position: relative;
}
#header .navigation li {
    float: left;
    margin: 0 20px 0 0;
    position: relative;
}
#header .navigation li a {
    float: left;
}
#header .navigation li:hover .sub-menu {
    display: block;
    transition: all 0.0s ease 0s;
}
#header .navigation > li > .sub-menu {
    display: none;
    width: 150px;
    transition: all 0.0s ease 0.2s;
    padding: 10px 15px 2px;
    position: absolute;
    top: 20px;
    left: 0;
}
#header .navigation > li > .sub-menu li {
    clear: both;
    margin: 0 0 10px;
    width: 100% ;
}
#header .sub-menu .sub-menu li {
    padding: 10px 0 0 15px;
    margin: 0 !important;
}

问题是.sub-menu在离开父母后立即消失。我怎样才能让.sub-menu留在原地只要我徘徊它？

以下是一个实例：http://m2c.dreamhosters.com/wordpress/

Answer 1

有两点需要注意：

在链接本身上放置任何填充，因为您不希望顶部li和子ul之间存在任何差距
确保子ul整齐地隐藏在顶部li的底部，顶部：100％。（这可以防止它们之间的任何差距。

E.g。

＆＃13;

#header .navigation {
    float: right;
    margin: 15px 0 0;
    position: relative;
}
#header .navigation li {
    float: left;
    margin: 0 20px 0 0;
    position: relative;
}
#header .navigation li a {
    float: left;
}
#header .navigation li:hover .sub-menu {
    display: block;
    transition: all 0.0s ease 0s;
}
#header .navigation li .sub-menu {
    display: none;
    width: 150px;
    transition: all 0.0s ease 0.2s;
    position: absolute;
    top: 100%;
    left: 0;
}
#header .navigation > li > .sub-menu li {
    clear: both;
    width: 100%;
}


ul, li {list-style: none; padding: 0; margin: 0;}

＆＃13;

<div id="header">
<ul class="navigation">
  <li>
    <a href="">link</a>
    <ul class="sub-menu">
      <li>text</li>
    </ul>
  </li>
</ul>
</div>

＆＃13;

Answer 2

在我看来，问题在于这行代码：

top: 20px;

如果您将鼠标从列表项锚标记快速移动到.sub-menu，.sub-menu赢了就会消失。

因此，您必须做的是缩小从a到.sub-menu的差距。

例如，您可以将top: 20px;更改为padding-top: 20px;，它可以解决问题。但是风格可能会改变。

更新：对于您提供的链接，您只需将top: 20px;更改为top: 15px。

我怎么能做到这一点，当我徘徊在它上面时，下拉菜单就在那里？

2 个答案: