Question

我移动鼠标指针向子菜单滚动后，我的子菜单立即消失。觉得我已经搞砸了我的CSS。经过几次尝试让它保持活跃，我无法弄清楚。我遵循了几个教程（have a look at it），他们在hover而不是ul（锚点）上调用了a，我尝试了类似的方法，但无法达到我想要的效果。请指出我犯了错误的地方。这是我的小提琴（my code）。 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 */
}

基本上，在悬停时，我会延长菜单项的高度，以便在我向下移动菜单时不会触发鼠标输出。

即使在鼠标悬停后，也可以保持下拉菜单处于活动状态（可见）

4 个答案: