导航栏上子菜单的 CSS 不起作用答案

【问题标题】：CSS for sub-menu on navigation bar not working导航栏上子菜单的 CSS 不起作用
【发布时间】：2014-03-25 06:11:01
【问题描述】：

我在一个网站上工作并创建了一个带有子项目的导航栏，但我没有在悬停时显示这些子项目。这是导航栏的 HTML 和 CSS 代码：

 <div class="collapse navbar-collapse" id="spi-primary-nav">
      <ul class="nav navbar-nav">
         <li id="menu-item-9265" class="home-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9001 current_page_item menu-item-9265">
             <a href="index.html">Home</a>
         </li>
         <li id="menu-item-9004" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9004 ">
             <a href="Default.aspx">Store</a>
             <ul>
                  <li><a href="#">Sub Menu 1</a></li>
                  <li><a href="#">Sub Menu 2</a></li>
                  <li><a href="#">Sub Menu 3</a></li>
             </ul>
         </li>      
     </ul>
</div>

CSS 在这里：

.navbar-nav > li > ul {
    display: none;
    position: absolute;
}
.navbar-nav > li > ul:hover {
    display:block;
}

如果有人想使用 Firebug 检查元素，这里是网站的实时链接： http://webcalendar.pcprosinc.com/Home

请帮帮我

【问题讨论】：

标签： html css firebug

【解决方案1】：

您的:hover 放错了位置。
它应该在li 而不是ul

试试这个：

.navbar-nav > li:hover > ul {
    display:block;
}

【讨论】：

我试过了，但它不起作用..你能用萤火虫检查这个问题吗？
当我将鼠标悬停在 Store 上时，我确实看到了子菜单，尽管样式不正确
正如 kei 所说，当您添加该规则时它正在工作。要在 Firebug 中测试它，切换到 CSS panel，右键单击它并选择 New Rule...。然后添加选择器，按Tab，添加display作为属性名称，再次按Tab，输入block作为值。
@SebastianZartner 它在 IE 浏览器中不工作，但在其他浏览器上工作正常..你能检查一下我错过了什么吗？ webcalendar.pcprosinc.com/Home
@kei 你建议的css不能在IE浏览器上工作？有什么遗漏吗？