4

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

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

我的代码如下：

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

任何帮助将不胜感激。

4

5 回答 5

2

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

编码：

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

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

这是一个要显示的 jsFiddle。

于 2013-02-13T21:11:37.090 回答
1

您也可以使用列表而不是 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>
于 2013-02-13T21:31:39.743 回答
0

您是否尝试过添加：

div#settingsMenu:hover{display: block;}

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

于 2013-02-13T21:08:48.467 回答
0

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

以下应该有效：

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

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

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

于 2013-02-13T21:19:29.620 回答
0

有时（对我来说发生过几次）问题不是优先顺序，而是 CSS 层。 z-index是一个赋予 CSS 另一个维度的属性。

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

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

解决问题。

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

于 2018-09-14T11:47:28.877 回答