How to handle adding a close link within an UL/LI item
<p>I've got some code like so:</p>

<pre><code>&lt;ul id="ulPersonal"&gt;
      &lt;li class="break eTime"&gt;
        &lt;p&gt;Manage your time card.&lt;/p&gt;
        &lt;div id="dEtime"&gt;
          some content
        &lt;/div&gt;
       &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The div only appears once you hove over the <code>li</code> item, in jquery:</p>

<pre><code>    $('#dEtime').hide(); //initially hide the div...

    //when the user hovers show the div
    $(".eTime").hover(function () {
        $('#dEtime').fadeIn('slow');
    });
</code></pre>

<p>So basically the page shows the li item, I hove over it and the div is shown.  Now I tried it so that when you "un-hover" off the li then the div disappears, however the UX was not friendly...to much flickering. </p>

<p>So I decided to add a close hyperlink...but if I add it within the li item and click on it, the div reappears as I am still "hovering" inside the li.  How can I handle this so that I can allow the user to close the div?</p>

<p>I've got a lot of seperate <code>ul</code> items that do this, so I dont want to add the close link after the ul, and obviously I cannot just add an <code>href</code> tag outside of an li, as that is just plain wrong.</p>
