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

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

css drop-down-menu

尝试选择菜单选项时，css悬停下拉菜单消失,css,drop-down-menu,Css,Drop Down Menu,我已经为我的代码搜索了一段时间了我有一个下拉菜单，在您将鼠标悬停在静态对象上后显示菜单的内容，但是当您尝试选择其中一个项目时，您将鼠标从静态对象上移开，这些项目消失后会被设置为显示：无我的代码如下： HTML: 非常感谢您的帮助。您是否尝试添加： divsetings菜单：悬停{display:block；} 还没有测试过它，但它似乎可以工作。您需要确保显示：无；部分位于悬停部分的上方，因为它是自上而下读取的，您需要适当的优先级，但也要有display:block；将鼠标悬停在设置菜单上时

我已经为我的代码搜索了一段时间了

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

我的代码如下：

HTML:

非常感谢您的帮助。

您是否尝试添加：

divsetings菜单：悬停{display:block；}

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

您需要确保显示：无；部分位于悬停部分的上方，因为它是自上而下读取的，您需要适当的优先级，但也要有display:block；将鼠标悬停在设置菜单上时

守则：

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

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

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

以下方面应起作用：

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

编辑：以下是说明上述内容的代码：

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

有时它会发生几次，对我来说，问题不是优先顺序，而是CSS的层次。 z-index是一个属性，它为CSS提供了另一个维度

在我的例子中，slider的z-index与我的下拉菜单simple混淆了

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

解决了这个问题

.子菜单是下拉列表

JSFIDLE帮了大忙。看来我的分区菜单把事情搞砸了。。。谢谢。

<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>

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