Drop Down Problems
<p>I am trying to create a drop down list. I have it working but not fully, using this code:</p>

<pre><code>$(document).ready(function(){
   $("#zone-bar li em").hover(function() {
       var hidden = $(this).parents("li").children("ul").is(":hidden");

       $("#zone-bar&gt;ul&gt;li&gt;ul").hide()        
       $("#zone-bar&gt;ul&gt;li&gt;a").removeClass();

       if (hidden) {
           $(this).parents("li").children("ul").toggle()
                  .parents("li").children("a").addClass("zoneCur");
       } 
   });
});
</code></pre>

<p>I managed to make it work so on hover the drop down list will appear, but when you move to select one of the items from the drop down list the drop down list closes. How do I fix that?</p>

<p>It works if I put it to <code>onclick</code> but then you have to click the arrow to close it again. You can see a live example at <a href="http://doctorwhohd.com" rel="nofollow">http://doctorwhohd.com</a> (currently using <code>onclick</code>)</p>
