Html 水平下拉菜单的展开按钮

我一直在开发一个基于CSS的下拉菜单，我希望它能将顶部的按钮均匀地分布在容器中。我已经找到了一些不同的解决方案来均匀地水平分布项目，但是我尝试过的那些解决方案被我需要放在顶部项目上的浮动打破了，以使下拉菜单在Firefox中工作

因此，我的问题是：

是否有一种方法可以将水平项目展开，即使这些项目是浮动的

或

有没有一种解决方案可以让Firefox中的下拉菜单不涉及浮动

这里有一个指向导航栏的简化JSFIDLE的链接：

HTML:

试试这个

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

.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%;
}