css - 即使悬停后也保持下拉菜单处于事件状态(可见)

Question

在我移动鼠标指针滚动到子菜单后，我的子菜单立即消失。感觉我把我的 CSS 搞砸了。经过多次尝试使其保持事件状态后，我无法弄清楚。我遵循了一些教程(have a look at it)，他们在 ul 而不是 a( anchor )上调用了 hover，我尝试了类似的方法但无法实现我想要的。请指出我在哪里犯了错误。这是我的 fiddle (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/