我的导航栏在 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>
最佳答案
正如@Nitin Garg 所说,#nav ul { display: none;
行隐藏了子元素。
但是,如果你想在父元素悬停时显示子元素,你必须添加这一行:
#nav li:hover ul {display: block; }
关于html - 水平导航栏在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36018018/