html - 水平下拉菜单的展开按钮

Question

我一直在研究基于 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;
}

Answer 1

试试这个

.top {
    display: table-cell;
    margin-left: 10px;
    padding:1%;
    position:relative;
    float:left;
    width:25%;
}