如何在悬停在菜单上时将其保留在下拉菜单中？

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和sub ul之间有任何间隙
• 确保sub ul整齐地塞在顶部li的底部，顶部：100％。 （这可以防止它们之间出现任何间隙。

例如

 #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;} 

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

Answer 2

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

top: 20px;

如果您将鼠标从列表项的定位标记快速移动到.sub-menu ，则.sub-menu不会消失。

因此，您要做的是将a到.sub-menu距离减小。

例如，您可以更改top: 20px; 到padding-top: 20px; ，就可以解决问题。 但是样式可能会更改。

更新：对于您提供的链接，您可以更改top: 20px; 至top: 15px 。