Jquery 悬停时在表行外侧向下滑动_Jquery

Jquery 悬停时在表行外侧向下滑动

jquery

Jquery 悬停时在表行外侧向下滑动,jquery,Jquery,我有以下资料： <!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"

我有以下资料：

<!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>


load（“jquery”，“1”）；
第1栏
第x列
可用选项





第1栏
第x列
可用选项





$（'.menu'）.hide（）；
$（'.avail'）.hover（函数（）{
$（this.next（）.slideDown（'slow'））
,
$（this.next（）.slideUp（'slow'）；
});

我想让菜单滑到它们下面的行的顶部。想象一下，如果窗帘悬停在第1行上方，则在第2行上方绘制窗帘

现在它正在扩展表行本身。也许我应该把1-x列放在左浮动的div中。

可能还需要使用hoverIntent。

您应该能够通过一些css实现这一点

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

举个例子