当鼠标离开 <li> 时，CSS 下拉菜单消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3648465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS dropdown menu disappears when mouse moves off of <li>
提问by Alex B
I have the problem whereby I can't keep my sub menu visible. When I hover over the parent <li>it appears, and then when I move down to select one of the sub menu items it disappears. This is as soon as focus is lost from the parent <li>
我有一个问题，我不能让我的子菜单可见。当我将鼠标悬停在父项上时，<li>它会出现，然后当我向下移动以选择其中一个子菜单项时，它会消失。这是一旦父母失去焦点<li>
I can't find a solution anywhere.
我在任何地方都找不到解决方案。
can someone please check it?
有人可以检查一下吗？
http://www.mymediaventure.com/about.php. It is under the Pricing tab. This is so frustrating. other examples I look at seem to work and I can't spot any clear differences that would hint why theirs works and mine doesn't.
http://www.mymediaventure.com/about.php。它位于定价选项卡下。这太令人沮丧了。我查看的其他示例似乎有效，但我找不到任何明显的差异来暗示为什么他们的有效而我的无效。
Thanks in advance.
提前致谢。
回答by Pat
The problem is in styles.cssand has to do with your #main_content h1title element overlapping your div#primary_navigation. You can fix it by setting a higher z-index on your navigation element as I've done in the example below.
问题在于styles.css并且与您的#main_content h1标题元素重叠您的div#primary_navigation. 您可以通过在导航元素上设置更高的 z-index 来修复它，就像我在下面的示例中所做的那样。
#wrapper #top #right div#primary_navigation
{
position : relative;
z-index: 2;
font-size : 11pt;
margin-top : 72px;
}
And a little further down in the CSS:
在 CSS 中再往下一点：
#main_content h1
{
position : relative;
z-index: 1;
top : -20px;
font-weight : normal;
}
If you want to visually see the problem, add a background colour to your #main_content h1and you'll notice it almost completely overlaps your tabs. As a result you can trigger the dropdown when you hover over the top of the Pricing tab, but as you move down to the sub items, your mouse goes over the title and the menu disappears.
如果您想直观地看到问题，请为#main_content h1您的标签添加背景颜色，您会注意到它几乎完全与您的标签重叠。因此，当您将鼠标悬停在“定价”选项卡的顶部时可以触发下拉菜单，但是当您向下移动到子项目时，您的鼠标会移到标题上并且菜单消失。
回答by user295292
#main_content h1 {
font-weight:normal;
position:relative;
top:-20px;
}
THis is the problem, try deleting the position:relative, or change it to something else, ie:absolute
这就是问题所在，尝试删除位置：相对，或将其更改为其他内容，即：绝对
回答by kvls
I followed the advice of the previous poster but with modifications. I changed all of my relative positioning to absolute for all items on the page (header, menu, and content) and this fixed the menu problem. I had to change for all three items for the menu to stop disappearing on mouseover.
我遵循了上一张海报的建议，但做了一些修改。我将页面上所有项目（标题、菜单和内容）的所有相对定位更改为绝对定位，这解决了菜单问题。我必须更改菜单的所有三个项目才能在鼠标悬停时停止消失。
回答by Nathan Hangen
My solution to this was to expand the padding around the parent so that the selectable/hover region was larger.
我对此的解决方案是扩展父级周围的填充，以便可选/悬停区域更大。
In my case I set something like: .nav a {padding: 20px;}
就我而言，我设置如下：.nav a {padding: 20px;}
回答by Daniel
I had a similar problem and I've found a solution for mine. Now I'm not versed in coding at all, some light Dreamweaver, but that's about it. I was having this problem with a tumblr themeand none of these solutions worked. Only after changing top: 25px;to top: 20px;, the dropdown did work for my site. Hope this helps someone.
我有一个类似的问题，我已经找到了适合我的解决方案。现在我根本不精通编码，一些轻的 Dreamweaver，但仅此而已。我在使用tumblr 主题时遇到了这个问题，但这些解决方案都没有奏效。只有在更改top: 25px;为 后top: 20px;，下拉菜单才适用于我的网站。希望这可以帮助某人。
回答by user2212713
I had a margin set on the <ul>which I removed and put on a divcontaining the <ul>.
我有一个边距设置在<ul>我删除并放在一个div包含<ul>.
anyway I managed to get a drop down menu from image hover effect, example and example code here dropdown menu from custom button image hover
无论如何，我设法从图像悬停效果，示例和示例代码这里获得下拉菜单从自定义按钮图像悬停下拉菜单
I hope this helps someone
我希望这可以帮助别人
回答by dutchdukes
I had a similar problem: a drop down menu disappeared when the mouse pointer hovered over a part of the drop down menu at which underneath a adsense ad was shown. Putting the ad down in the html page solved the issue. Did not try out other solutions.
我有一个类似的问题：当鼠标指针悬停在显示广告下方的下拉菜单的一部分时，下拉菜单消失了。将广告放在 html 页面中解决了这个问题。没有尝试其他解决方案。
回答by salamander
I also had this problem. The problem was that there was a space between where the main menu ended and where the dropdown menu began, so while moving the nouse down to the dropdown options, it would pass over an area of the background and the menu would disappear.
我也有这个问题。问题是在主菜单结束的地方和下拉菜单开始的地方之间有一个空间，所以当把 nouse 向下移动到下拉选项时，它会越过背景区域，菜单就会消失。
The fix was adjusting the top positionas shown below (in my case, from 4.0 to 3.75em)
修复是调整顶部position，如下所示（在我的情况下，从 4.0 到 3.75em）
.main-navigation ul ul {
position: absolute;
top: 3.75em;
回答by user6245894
I had the same problem with the secondary hover navigation going away when i tried to move from the primary to the secondary menu. What seemed to help for me was to move the margin up into the primary menu. I added the following line to my already existing ul li ul { margin-top: -.1em; }
当我尝试从主菜单移动到二级菜单时，二级悬停导航消失时遇到了同样的问题。似乎对我有帮助的是将边距上移到主菜单中。我将以下行添加到我已经存在的 ul li ul { margin-top: -.1em; }
