How to properly make jQuery hover work
<p>I have this test page: <a href="http://www.problemio.com/index_new.php" rel="nofollow">http://www.problemio.com/index_new.php</a></p>

<p>and I am trying to make some jQuery for hovering functionality.  But I am not exactly sure how to  go about it.  Have some jQuery code like this:</p>

<pre><code>$('ul#environment li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

$('ul#health li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});
</code></pre>

<p>and HTML on the page like this:</p>

<pre><code>        &lt;div style="display:none;"&gt;
            &lt;ul id="environment" &gt;
                &lt;li&gt;Green Lifestyle&lt;/li&gt;
                &lt;li&gt;Energy Use&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul id="health"&gt;
                &lt;li&gt;Medicine&lt;/li&gt;
                &lt;li&gt;Diet&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
</code></pre>

<p>and then I have some HTML  links that I want to display the appropriate hover effect when the user mouses over.</p>

<p>How do I do that? I seem to have seperate pieces of the functionality, but not sure how to make it all play together.</p>
