javascript: how do I make one element visible relative to an element I hover over?
<p><a href="http://jsfiddle.net/awfex/4/" rel="nofollow">http://jsfiddle.net/awfex/4/</a></p>

<p>HTML:</p>

<pre><code>&lt;div class="section-header section-header-on" id="section_header_289" style="left: 50px;"&gt;
    &lt;span class="collapse"&gt;&lt;/span&gt;
    &lt;div class="section-name"&gt;
        &lt;span class="name"&gt;Testing Facebox suff&lt;/span&gt;&lt;/div&gt;
        &lt;ul class="tools"&gt;
            &lt;li&gt;
                &lt;a class="trash" href="#"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="#" class="edit"&gt;&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>js:</p>

<pre><code>$j = jQuery.noConflict();
$j(".section-header").hover(function(){
    $j(this).find("ul").show();
});
</code></pre>

<p>So, I need this to be relative, because there are multiple "section-header"s and the ID is generally unknown / generated by the app.  But, basically, I want to be able to hover over the section-header, and then have ul.tools change from display: none; to display: block. So I figured .show() could do that. but.. I guess my selector is wrong. =\</p>
