了slideDown外表行的懸停

我有以下幾點：了slideDown外表行的懸停

<!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放在浮動的左邊。也許還需要使用hoverIntent。

來源

2011-02-24 Phillip Senn

你應該可以用一些CSS來解決這個問題。

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

jsfiddle上的示例。

來源

2011-02-24 19:40:42

了slideDown外表行的懸停

回答

相關問題