CSS 尝试选择菜单选项时，css悬停下拉菜单消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14863044/
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 hover drop down menu disappears when trying to select menu option
提问by Deo
I have been searching for a fix for my code for a while now.
一段时间以来，我一直在为我的代码寻找修复程序。
I have a drop down menu that displays the content of the menu after you hover over a static object, however when you attempt to select one of the items (you move your mouse off of the static object) the items disappear (are set back to display: none)
我有一个下拉菜单，在您将鼠标悬停在静态对象上后显示菜单的内容，但是当您尝试选择其中一个项目（您将鼠标移离静态对象）时，项目消失（设置回显示：无）
my code is as follows:
我的代码如下：
HTML:
HTML：
<div id="menuContainer">
<div class="menuItem first">
<div class="settingsIcon"></div>
<div class="text">Account Settings</div>
<div class="downArrowIcon"></div>
</div>
<div id="settingsMenu">
<div class="menuItem">Manage clients</div>
<div class="menuItem">Manage specials</div>
<div class="menuItem">Manage users</div>
<div class="menuItem">Logout</div>
</div>
</div>';
CSS:
CSS：
div#menuContainer div:hover + div#settingsMenu{
display: block;
position: relative;
z-index: 100;
}
div#menuContainer div#settingsMenu{
display: none;
width: 100%;
}
Any help would be greatly appreciated.
任何帮助将不胜感激。
采纳答案by PlantTheIdea
You need to make sure the display:none;section is above the hover section (because its read top-down, you want priority appropriately), but also to have display:block;when hovering over the settingsMenu itself.
您需要确保该display:none;部分位于悬停部分上方（因为它是自上而下读取的，您需要适当的优先级），而且在将鼠标display:block;悬停在 settingsMenu 本身上时也需要。
The code:
编码：
#settingsMenu{
display: none;
width: 100%;
}
#menuContainer div:hover + #settingsMenu,#settingsMenu:hover{
display: block;
position: relative;
z-index: 100;
}
回答by mojarras
You could also do this using lists instead of divs, which is much cleaner and can be extended for submenus easily. Here is a sample:
您也可以使用列表而不是 div 来执行此操作，这样更简洁并且可以轻松扩展子菜单。这是一个示例：
<html>
<head>
<style type="text/css">
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<div class="settingsIcon"></div>
<div class="text">Account Settings</div>
<div class="downArrowIcon"></div>
<ul>
<li>Manage clients</li>
<li>Manage specials</li>
<li>Manage users</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
回答by Spoderman4
Sometimes (it happaned few times to me) the problem isn't priority in order, but in layers of CSS. z-indexis a property that gives CSS another dimension.
有时（它发生在我身上几次）问题不是按顺序排列，而是在 CSS 层中。 z-index是赋予 CSS 另一个维度的属性。
In my example, z-index from slider was messing with my dropdown, simple
在我的示例中，滑块中的 z-index 弄乱了我的下拉菜单，很简单
.submenu {
...
z-index: 99999;
}
fixes the problem.
解决问题。
(.submenu is <ul>of dropdown list)
（.submenu 是<ul>下拉列表）
回答by braican
All you have to do is attach the :hover state to the div:menuContainer, rather than the divs inside. Also, you don't need the +
你所要做的就是将 :hover 状态附加到div:menuContainer，而不是div里面的s 。此外，您不需要+
The following should work:
以下应该工作：
#menuContainer:hover div#settingsMenu{
display: block;
position: relative;
z-index: 100;
}
EDIT: below is a CodePed illustrating the above:
编辑：下面是说明上述内容的 CodePed：
回答by Steve
Have you tried adding:
您是否尝试添加：
div#settingsMenu:hover{display: block;}
div#settingsMenu:hover{display: block;}
Haven't tested it, but it seems like that would work.
还没有测试过，但似乎可以。
