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

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

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

我的代码如下：

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

任何帮助将不胜感激。

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

代码：

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

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

这是一个 jsFiddle 来展示 http://jsfiddle.net/YrVJS/.