尝试选择菜单选项时css hover下拉菜单消失

我一直在为我的代码搜索一个修复程序，现在已经有一段时间了。尝试选择菜单选项时css hover下拉菜单消失

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

我的代码如下：

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

任何帮助将不胜感激。

来源

2013-02-13 Deo

你需要确保display:none;部分是悬停段以上（由于其读取自上而下的，你要适当优先考虑），但也有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。

来源

2013-02-13 21:11:37 PlantTheIdea

jsFiddle帮了很多忙，看来我的div＃settingsMenu搞砸了......非常感谢。 – Deo 2013-02-13 21:19:11

您是否尝试过加入：

div#settingsMenu:hover{display: block;}

没有测试它，但它似乎是这工作。

来源

2013-02-13 21:08:48 Steve

是的，我试过了。它没有解决它。 :( – Deo 2013-02-13 21:13:42

您只需将：悬停状态添加到div:menuContainer而不是div即可。此外，您不需要+

下面应该工作：

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

编辑：下面是一个CodePed说明上面：

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

来源

2013-02-13 21:19:29 braican

你也可以做到这一点使用列表而不是divs，这更清晰，可以轻松扩展子菜单。这里是一个样本：

<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-13 21:31:39 mojarras

尝试选择菜单选项时css hover下拉菜单消失

回答

相关问题