slideDown outside of table row on hover
<p>I have the following:</p>

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

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

<p>What I would like is for the menus to slide down over top of the rows that are beneath them.
Think of a window shade being drawn over top of row 2 if they hover over row 1.</p>

<p>Right now it's expanding the table row itself.
Maybe I should put columns 1-x in divs that are float left.
Probably need to use hoverIntent, too.</p>
