Q: Spreading buttons of horizontal dropdown menu I've been working on a CSS based dropdown menu and I want it to evenly spread the top buttons across its container. I've found a few different solutions for evenly spreading items horizontally, but the ones I've tried are broken by the float I need to put on the top items to make the dropdown work in Firefox. 
So my questions are:
Is there a method of spreading horizontal items that works even if those items are floated? 
or
Is there a solution for making dropdown menus work in Firefox that doesn't involve floating?
Here's a link to a (somewhat) simplified JSFiddle of the navbar: 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;
}


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

