在Firefox中不工作的水平导航栏

我的导航栏在Firefox中不起作用。您无法点击任何子项目。如果我在这里放了太多的代码，我很抱歉，但我真的不知道是什么导致了这个问题。尽可能多地去除了那些微不足道的东西。在Firefox中不工作的水平导航栏

#navbar { 
 
    width: 100%; 
 
    border-top: 1px solid #879478; 
 
    height: 35px; 
 
} 
 
#navigation { 
 
    width: 1000px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: -10px !important; 
 
} 
 
#nav { 
 
    float: left; 
 
    width: 1000px; 
 
    height: 35px; 
 
    list-style: none; 
 
} 
 
#nav a { 
 
    text-indent: 0; 
 
    display: inline-block; 
 
    margin-top: -1px !important; 
 
    font-weight: normal; 
 
    border: 1px solid transparent; 
 
    font-style: normal; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 
#nav ul { 
 
    position: absolute; 
 
    list-style: none; 
 
    display: inline-table; 
 
    margin-top: 1px !important; 
 
    height: 35px; 
 
} 
 

 
#nav li:hover > ul { 
 
    display: block;  
 
} 
 

 
#nav li { 
 
    float: left; 
 
} 
 
#nav ul { 
 
    display: none; 
 
} 
 
#nav ul a { 
 
    -moz-box-shadow: none !important; 
 
    -webkit-box-shadow: none !important; 
 
    box-shadow: none !important; 
 
    display: inline-block; 
 
    width: inherit; 
 
    text-align: center; 
 
    display: block; 
 
    font-weight: normal; 
 
} 
 
#nav ul { 
 
    padding: 0px; 
 
    z-index: 100 !important; 
 
} 
 
#nav ul li { 
 
    float: none; 
 
} 
 
#nav ul ul { 
 
    width: 141px !important; 
 
    padding-top: 1px !important; 
 
    border-top: 1px solid #6f8059 !important; 
 
    position: absolute; 
 
    margin-top: -38px !important; 
 
    left: 100%; 
 
    margin-left: 1px; 
 
    z-index: 100 !important; 
 
}

<div id="navbar"> 
 
    <div id="navigation"> 
 
    <ul id="nav"> 
 
     <li><a style="width: 150px !important;">subject 1</a> 
 
     <ul> 
 
      <li><a href="blahblah1.html">child 1</a> 
 
      </li> 
 
      <li><a href="blahblah2.htm">child 2</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

来源

2016-03-15 Wanda Embar

不Chrome浏览器或者 –

工作，我没有看到任何一种浏览器滚动条。 –

你的CSS隐藏了孩子，不知道你在这里期待什么 –

正如@Nitin加尔格说，#nav ul { display: none; }线hidding子元素。

但是，如果你想显示在父李悬停孩子的元素，你必须加入这一行：

#nav li:hover ul {display: block; }

来源

2016-03-15 17:42:14

对不起，没有包含该代码，但我确实有： #nav li：hover> ul {display：block;} 它在chrome和ie中效果很好，但在Firefox中没有。 –

在Firefox中不工作的水平导航栏

回答

相关问题