Question

我一直在寻找我的代码修复程序。

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

我的代码如下：

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%;
}

非常感谢任何帮助。

Answer 1

您需要确保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

Answer 2

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

Answer 3

您是否尝试过添加：

div#settingsMenu:hover{display: block;}

尚未对其进行测试，但似乎可行。

Answer 4

您所要做的就是将：悬停状态附加到div:menuContainer，而不是div里面。此外，您不需要+

以下内容应该有效：

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

编辑：下面是一个CodePed，说明了上述内容：

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

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

4 个答案: