尝试选择菜单选项时，css悬停下拉菜单消失答案

【问题标题】：css hover drop down menu disappears when trying to select menu option尝试选择菜单选项时，css悬停下拉菜单消失
【发布时间】：2013-01-29 13:25:32
【问题描述】：

一段时间以来，我一直在寻找代码的修复方法。

我有一个下拉菜单，可在您将鼠标悬停在静态对象上后显示菜单的内容，但是当您尝试选择其中一项时（将鼠标从静态对象上移开），这些项会消失（设置回显示：无）

我的代码如下：

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：

div#menuContainer div:hover + div#settingsMenu{
    display: block;
    position: relative;
    z-index: 100;
}

div#menuContainer div#settingsMenu{
    display: none;
    width: 100%;
}

任何帮助将不胜感激。

【问题讨论】：

标签： css drop-down-menu

【解决方案1】：

有时（我遇到过几次）问题不是按顺序排列，而是在 CSS 层中。 z-index 是赋予 CSS 另一个维度的属性。

在我的示例中，滑块中的 z-index 与我的下拉菜单混淆了，很简单

.submenu {
    ...
    z-index: 99999;
}

解决问题。

（.submenu 是下拉列表的<ul>）

【讨论】：

【解决方案2】：

您所要做的就是将 :hover 状态附加到div:menuContainer，而不是内部的divs。另外，您不需要+

以下应该有效：

#menuContainer:hover div#settingsMenu{
    display: block;
    position: relative;
    z-index: 100;
}

编辑：下面是说明上述内容的 CodePed：

http://codepen.io/braican/pen/yIjLs

【讨论】：

【解决方案3】：

您也可以使用列表而不是 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>

【讨论】：

【解决方案4】：

您需要确保display:none; 部分位于悬停部分上方（因为它是自上而下读取的，因此您需要适当的优先级），而且在将鼠标悬停在 settingsMenu 本身上时也要有 display:block;。

代码：

#settingsMenu{
    display: none;
    width: 100%;
}

#menuContainer div:hover + #settingsMenu,#settingsMenu:hover{
    display: block;
    position: relative;
    z-index: 100;
}

Here is a jsFiddle to show.

【讨论】：

jsFiddle 帮了大忙。看来我的 div#settingsMenu 搞砸了……非常感谢。

【解决方案5】：

您是否尝试过添加：

div#settingsMenu:hover{display: block;}

还没有测试过，但似乎可以。

【讨论】：