CSS：带浮动换行符的 Div 在 Firefox 中，但在 Safari 中正常

Question

当鼠标悬停在页面中大表格中的单元格上时，我有一个下拉菜单。表格变得足够大，单元格有时会出现在窗口的最右侧。将鼠标悬停在一行上会显示该行正下方的菜单，并且它会动态移动到您悬停的单元格下方（全部通过 JQuery）。显示菜单按钮或标题 div，您可以将鼠标悬停以显示下拉菜单，这是一个容器 div，其中包含两个 float: left 的 ul，以便它们并排放置。

除非我将鼠标悬停在页面最右侧的单元格上，否则它工作正常。它在 Safari 中有效，因为如果下拉菜单位于窗口之外，则 ul 会保持浮动状态并从页面/窗口中消失。但在 Firefox 中，有一个换行符/ul 失去了浮动，第二个换行符会换行到下一行以保留在窗口内。

我尝试了这个 hack，但 Firefox 7 仍然不喜欢它： CSS 浮动 - 如何将它们保持在一行上？

非常感谢任何帮助。相关标记/代码：

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});
}
);