【问题标题】：Hover Not Staying Long Enough悬停时间不够长
【发布时间】：2013-12-20 06:59:25
【问题描述】：

以下代码创建一个带有悬停列表的导航栏。

悬停有效，但我必须将鼠标快速向下移动到悬停列表以确保它在悬停时保持打开状态 - 即它会快速闪烁。我是否需要将悬停的顶部挤压到靠近主 NAV 栏的位置？非常感谢任何帮助。

    /* Navigation Style */ 
    .dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:40px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; } 

    /* Basic List Styling (First/Base Level) */ 
    .dropdown ul {padding:0; margin:0; list-style: none;} 
    .dropdown ul li {float:left; position:relative;} 
    .dropdown ul li a { border-right:1px solid #666666; padding:12px 8px 12px 8px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;} 
    .dropdown ul li a:hover {color:#ffffff; background:#232323;} 

    /* Second Level Drop Down Menu */ 
    .dropdown ul li ul {display: none;} 
    .dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:41px; min-width:150px; left:0;} 
    .dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; } 
    .dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;} 

    /* Third Level Drop Down Menu */ 
    .dropdown ul li:hover ul li ul {display: none;} 
    .dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }

实际的 NAV 栏 HTML 是

  <div class="dropdown"> 
<ul> 
 <li><a href="about.php">About</a></li> 
 <li><a href="steam-railtours-all.php">Steam Rail Tours</a> 
  <ul> 
   <li><a href="steam-railtours-all.php">All Rail Tours</a></li> 
   <li><a href="vsoe-steam-railtours.php">British Pullman (VSOE)</a></li> 
  </ul> 
 </li> 
</ul> 
  </div>

【问题讨论】：

标签： html hover

【解决方案1】：

问题是您的下拉菜单距离静态菜单 1 像素。可以通过更改这一行代码来修复：

.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:40px; min-width:150px; left:0;}

我把 41px 改成了 40px。

http://jsfiddle.net/eqH2Q/1/

【讨论】：

谢谢 - 效果好多了，虽然有时会消失 - 需要转到 39 像素，但这并不能让它看起来那么好

【解决方案2】：

Live Demo

只需添加这个简单的规则：

.dropdown>ul>li>a:hover {
     margin-bottom:20px;
}

这样，当您悬停按钮时，它会获得一个不可见的底部边距，该边距将扩展触发悬停事件的区域。如演示所示，这适用于多个下拉菜单。

【讨论】：

【解决方案3】：

试试这条线：

li:not(:hover) li {
display: none;
}

并摆脱所有显示：无和其他悬停。当其子列表的 li 元素悬停时，它将打开子列表，并且您可以添加任意数量的子列表，而无需更改 CSS

【讨论】：