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

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

任何帮助将不胜感激。

原文由 Deo 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

这是一个要显示的 jsFiddle 。

原文由 PlantTheIdea 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我只是添加了一个 boder-top 以使 dropdwon 菜单更靠近启用悬停的对象以避免这种破坏，并为边框顶部提供与对象容器颜色和繁荣一致的背景颜色，它可以工作….在这种情况下您将不必处理 z 索引。

 boder-top: 26px solid red;

原文由 David MD 发布，翻译遵循 CC BY-SA 4.0 许可协议