title: jquery hover effect, submenu disappears
body: <p>I'm using wordpress to dynamically create a navbar, and jquery to append a submenu to the nav-bar. Using jquery, when you hover over the second menu item, the submenu animates down and fades in. I created a jsfiddle here:  <a href="http://jsfiddle.net/NWpBB/" rel="nofollow noreferrer">http://jsfiddle.net/NWpBB/</a></p>
  
  <p>It works, but not well. If you hover over the top right list item in the submenu, it disappears. It also seems a bit glitchy. Any idea on how I can improve the functionality of this hover effect given the jquery on the above js fiddle link?</p>
  
  <p>Here is the jquery:</p>
  
  <pre><code>$("#menu-nav li:nth-child(2) a").append('&lt;span id="dropdown"&gt;&lt;/span');
  
  $(".hoverMenu").css({"opacity":"0"});
          $(".hoverMenu").appendTo("#menu-nav li:nth-child(2)");
  
          $("#menu-nav li:nth-child(2)").hover(function(){
              $(".hoverMenu").stop().animate({
                  top: '38',
                  opacity: '1'
              }, 500);
          }, function(){
              $(".hoverMenu").stop().animate({
                  top: '-290',
                  opacity: '0'
              }, 500);
          });
  </code></pre>