Question

我有以下内容：

<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
</head>

<body>
<table border="1">
<tr>
<td>Column 1</td>
<td>Column x</td>
<td>
<div class="avail">Available Options</div>
<ul class="menu">
<li><a href="A.htm">Menu A</a></li>
<li><a href="B.htm">Menu B</a></li>
<li><a href="C.htm">Menu C</a></li>
</ul>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column x</td>
<td>
<div class="avail">Available Options</div>
<ul class="menu">
<li><a href="A.htm">Menu A</a></li>
<li><a href="C.htm">Menu C</a></li>
<li><a href="D.htm">Menu D</a></li>
</ul>
</td>
</tr>
</table>
<script>
$('.menu').hide();
$('.avail').hover(function() {
    $(this).next().slideDown('slow')
    ,
    $(this).next().slideUp('slow');
});
</script>
</body>
</html>

我想要的是菜单向下滑过它们下面的行的顶部。如果它们悬停在第1行上，可以想象在第2行的顶部绘制一个窗口阴影。

现在它正在扩展表行本身。也许我应该将列1-x放在浮动的div中。可能也需要使用hoverIntent。

Answer 1

你应该能够用一些css来解决这个问题。

.menu{
    position:absolute;
    background-color:white;
}

jsfiddle上的示例。

在悬停时表格行外的slideDown

1 个答案: