CSS: Div w/ floats line-breaks in Firefox, but OK in Safari

Question

I have a dropdown menu that appears when mousing over cells in a large table in the page. The table gets large enough that cells can sometimes appear at the far right of the window. Mousing over a row shows the menu just below the row, and it dynamically shifts to be under the cell you are hovering (all via JQuery). A menu button or header div is revealed that you can mouseover to show the dropdown, which is a container div which contains two ul's that float: left so they stay side-by-side.

It works fine unless I mouseover a cell at the far right of the page. It works in Safari, in that if the dropdown is outside the window, the ul's stay in their float and bleed off the page/window. But in Firefox, there's a line break/the ul's lose their float the second one breaks to the next line to stay within the window.

I tried this hack, but Firefox 7 still doesn't like it: CSS floats - how do I keep them on one line?

Any help is greatly appreciated. Relevant markup/code:

HTML

<table summary="" class="tbl">
<thead>
<tr>
<th>Select</th>
<th>Employee<br>ID</th>
<th>Position Title</th>
<th>Job Code</th>
<th>Name</th>
<th>Employee<br>Dept</th>
<th>Organization</th>
<th>Location</th>
<th>FTE</th>
<th>Annualized FTE<br>Base Pay</th>
<th>Performance<br>Rating</th>
<th>Grade</th>
<th>Annualized<br>Base Min</th>
<th>Annualized<br>Base Max</th>
<th>Annualized<br>Compa-ratio</th>
<th>Annualized Range<br>Penetration</th>
</tr>
</thead>
<tbody>
<tr class="dataRow">
<td class="dataCell"><input type="checkbox"></td>
<td class="dataCell">1002</td>
<td class="dataCell"><a href="#">Accounting Manager</a></td>
<td class="dataCell"><a href="#">ACC1000</a></td>
<td class="dataCell"><a href="#">Doe, John</a></td>
<td class="dataCell">Accounting</td>
<td class="dataCell"><a href="#">Portland</a></td>
<td class="dataCell columnGreen">Abbottabad</td>
<td class="dataCell">1</td>
<td class="dataCell">$82,000</td>
<td class="dataCell">3</td>
<td class="dataCell"></td>
<td class="dataCell columnBlue">$30,000</td>
<td class="dataCell">$50,000</td>
<td class="dataCell">2.050</td>
<td class="dataCell">260%</td>
</tr>
<tr class="dataRow">
<td class="dataCell"><input type="checkbox"></td>
<td class="dataCell">1002</td>
<td class="dataCell"><a href="#">Accounting Manager</a></td>
<td class="dataCell"><a href="#">ACC1000</a></td>
<td class="dataCell"><a href="#">Doe, John</a></td>
<td class="dataCell">Accounting</td>
<td class="dataCell"><a href="#">Portland</a></td>
<td class="dataCell columnGreen">Abbottabad</td>
<td class="dataCell">1</td>
<td class="dataCell">$82,000</td>
<td class="dataCell">3</td>
<td class="dataCell"></td>
<td class="dataCell columnBlue">$30,000</td>
<td class="dataCell">$50,000</td>
<td class="dataCell">2.050</td>
<td class="dataCell">260%</td>
</tr>
</tbody>
</table>

<div id="menu">
<div id="menuHeader"><a href="#">Menu</a></div>
<div id="menuItems">
<ul>
<li><a href="#">Select</a></li>
<li><a href="#">View or Edit</a></li>
<li><a href="#">Assign to Job Markets</a></li>
<li><a href="#">Add a Note</a></li>
<li><a href="#">Delete</a></li>
</ul>
<ul>
<li><a href="#">Select</a></li>
<li><a href="#">View or Edit</a></li>
<li><a href="#">Assign to Job Markets</a></li>
<li><a href="#">Add a Note</a></li>
<li><a href="#">Delete</a></li>
</ul>
<br style="clear: both"/>
</div>
</div>

CSS

#menu {
position: absolute;
top: 36px;
left: 600px;
display: none;
white-space: nowrap;
}

#menu #menuHeader {
line-height: 24px;
height: 24px;
padding: 0 15px 0 0px;
}

#menu #menuHeader a {
height: 23px;
width: 61px;
margin: 0 58px 0 0;
display: inline-block;
padding: 0 0 0 15px;
}

#menu #menuItems {
border-collapse: collapse;
position: relative;
display: none;
}

#menu #menuItems ul {
float: left;
position: relative;
}

#menu #menuItems li {
display: block;
position: relative;
height: 23px;
line-height: 23px;
}

#menu #menuItems a {
display: block;
position: relative;
padding: 0 15px 0 15px;
}

JQuery

// row highlighting, menu display (visiblity)
$('tr.dataRow').mouseenter(
function () {
$('div#menu').css('display', 'block');
}
);

// menu offset relative to td hovered
$('td').mouseenter(
function () {
var tempOffset = $(this).offset();
var tempHeight= $(this).outerHeight();
var tempTop = tempOffset.top + tempHeight - 1;
var tempLeft = tempOffset.left;
$('div#menu').offset({top:tempTop, left:tempLeft});
}
);