悬停后仍保持下拉菜单处于活动状态(可见) [英] Keeping dropdown menu active (visible) even after hover out

问题描述

当我移动鼠标指针滚动到子菜单后，我的子菜单立即消失.感觉就像我将CSS固定在某个地方.经过几次尝试使其保持活动状态，我无法弄清楚.我遵循了一些教程(看一遍)，在这些教程中，在ul上的hover而不是a(锚点)上，我尝试了类似的方法，但是无法实现我想要的.请指出我犯错的地方.这是我的小提琴(我的代码).下面是hover的CSS代码示例.

My sub menu disappears immediately after I move my mouse pointer to scroll towards the sub menu. Feel like I have screwed my CSS somewhere. I could not figure out after several attempts to make it stay active. I followed few tutorials(have a look at it) where they have called the hover on the ul instead of a(anchor), I tried similar ways but could not achieve what I want. Please point out where I have made the mistake. Here is my fiddle(my code). Sample CSS code for hover is below.

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

推荐答案

将填充内容放在列表项而不是ul或容器上.这样，下拉菜单与您的悬停元素重叠，并且浏览器从不认为您将鼠标悬停在该元素之外.看到这个:

Put the padding on your list items instead of your ul or container. That way the dropdown overlaps your hover element and your browser never thinks that you hovered out of the element. See this:

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

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

这篇关于悬停后仍保持下拉菜单处于活动状态(可见)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！