Question

我有一个下拉菜单，当鼠标悬停在页面中的大表格中的单元格时会出现。该表变得足够大，以至于单元格有时会出现在窗口的最右侧。将鼠标悬停在一行上会显示行下方的菜单，并且它会动态切换到您正在悬停的单元格下（所有这些都通过JQuery）。显示一个菜单按钮或标题div，你可以鼠标悬停显示下拉列表，这是一个包含两个浮点数的容器div：left，因此它们保持并排。

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

我试过这个黑客，但Firefox 7仍然不喜欢它： CSS floats - how do I keep them on one line?

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

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

CSS：在Firefox中使用/浮点换行符，但在Safari中可以

0 个答案: