即使悬停在外，也保持下拉菜单处于活动状态(可见)

Question

移动鼠标指针滚动到子菜单后，我的子菜单立即消失。感觉我把CSS搞砸了。几次尝试让它保持活跃后，我都想不通。我遵循了一些教程（看一看），他们在ul上调用了hover，而不是a（锚点），我尝试了类似的方法，但无法实现我想要的。请指出我错在哪里。这是我的小提琴（我的密码）。hover的示例CSS代码如下。

#topnav ul li ul
{
    display: none;
    position: absolute;
    text-align: left;
    background:#510000; 
    top:30px;
}
#topnav ul li:hover ul
{
    display: block;        
}

Answer 1

将填充项放在列表项上，而不是ul或容器上。这样，下拉列表就会与悬停元素重叠，浏览器永远不会认为您悬停在元素之外。请参阅：

#topnav li {
    display:inline-block;
    padding:10px 0;
    margin-right:30px;
    position: relative;
}

http://jsfiddle.net/jeffreyTang/q5cmqLrf/1/

Answer 2

您还可以提供

#topnav ul li ul {
   padding-top:30px
} 

而不是：

#topnav ul li ul {
   top:30px
} 

Answer 3

问题是你的填充位于导航级别，并且你试图使下拉列表显示在它的下方。因为你将下拉列表放置在远离父li的位置，所以当你向下移动鼠标时，你不再将鼠标悬停在它上面。要修复此问题，请删除导航中的填充并将其添加到li.中

删除此处的填充：

#topnav{
   display:block;
   clear:both;
   width:500px;
   margin:0;
   padding:0;
   text-align:center;
}

添加到此处：

#topnav li{
   display:inline-block;
   padding: 15px 0 15px 5px;
   margin-right:30px;
   position: relative;        
}

从这里删除顶部：

#topnav ul li ul {
    display: none;
    position: absolute;
    text-align: left;
    background:#510000; 
}

小提琴：http://jsfiddle.net/zj8krh95/7/

Answer 4

这里有一种方法（这更像是一个技巧）：

http://jsfiddle.net/zj8krh95/5/

#topnav ul li:hover {
    padding-bottom: 10px;
    margin-bottom: -10px; /* so that the menubar's height stays the same */
}
#topnav ul li:hover ul {
    margin-top: -10px; /* so that the menu opens at the right position */
}

基本上，在悬停时，我会扩展菜单项的高度，这样当我向下移动到菜单时，就不会触发mouseout。