我一直在研究基于 CSS 的下拉菜单,我希望它能将顶部按钮均匀分布在其容器中。我找到了几个不同的水平均匀分布元素的解决方案,但我尝试过的解决方案被我需要放在顶部元素上的 float 打破,以使下拉列表在 Firefox 中工作。
所以我的问题是:
有没有一种方法可以展开水平元素,即使这些元素是 float 的?
或
有没有解决方案可以使下拉菜单在 Firefox 中工作而不涉及 float ?
这是导航栏的(稍微)简化的 JSFiddle 的链接:http://jsfiddle.net/erynamrod/wPJ23/3/
HTML:
<ul class="topper">
<li class="top"><a href="/" class="tlink">Top 1</a></li>
<li class="top"><a href="/" class="tlink">Top 2</a>
<ul class="hidden">
<li><a href="/" class="dir">Dropdown 2.1</a>
<ul class="hidden2">
<li><a href="/" class="dir">Dropdown 2.1.1</a></li>
<li><a href="/" class="dir">Dropdown 2.1.2</a></li>
<li><a href="/" class="dir">Dropdown 2.1.3</a></li>
</ul>
</li>
<li><a href="/" class="dir">Dropdown 2.2</a></li>
</ul>
</li>
<li class="top"><a href="/" class="tlink">Top 3</a>
<ul class="hidden">
<li><a href="/" class="dir">Dropdown 3.1</a></li>
<li><a href="/" class="dir">Dropdown 3.2</a></li>
</ul>
</li>
</ul>
CSS:
.topper {
font-family: Verdana, sans-serif;
width: 100%;
padding: 0%;
display:table;
text-align:center;
z-index:5;
}
.top {
display: table-cell;
margin-left: 10px;
padding:1%;
position:relative;
/* float:left;
This float is necessary for the dropdowns to work in Firefox,
but it breaks the table/table-cell display that spreads the .top */
}
/* Everything below here is, I think, relatively unrelated to my current problem */
.topper > li:hover {
background-color:#6dcff6;
}
.hidden > li:hover {
background-color:#6dcff6;
padding-right:0;
margin:0;
}
.hidden2 > li:hover {
background-color:#6dcff6;
}
.topper > li:hover > a:link {
color:#fff;
}
.dir {
text-decoration:none;
color:#fff;
margin-right: 15px;
}
.tlink {
text-decoration:none;
color:#6dcff6;
display:block;
}
li {
white-space: nowrap;
}
.hidden, .hidden2 {
position:absolute;
display:none;
list-style: none;
margin:0;
padding:0;
text-align:left;
background-color:#333;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
left:0px;
}
.hidden > li {
padding:5% 0% 5% 5%;
width: 100%;
}
.hidden2 > li {
padding:5%;
size: 1em;
}
.hidden {
top:100%;
left:0%;
}
.hidden2 {
left: 100%;
top: 0%;
}
ul > li:hover > ul {
display: list-item;
}
最佳答案
试试这个
.top {
display: table-cell;
margin-left: 10px;
padding:1%;
position:relative;
float:left;
width:25%;
}
关于html - 水平下拉菜单的展开按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22969722/