title: jQuery does not work on dropdown menu on first hover
body: <p>I have created a simple dropdown menu using CSS and want to create a fadein with jQuery. The fadein works, but only after you hover over the list element twice. The first hover has no fadein effect.</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  
  &lt;head&gt;
      &lt;title&gt;dropdown_2&lt;/title&gt;
  
  
      &lt;link href="css/dropDrownNav.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
  
              $("#nav li").has("ul").hover(function () {
                  $(this).addClass("current").children("ul").fadeIn(500);
              }, function () {
                  $(this).removeClass("current").children("ul").stop(true, true).css("display", "none");
              });
  
          });
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
     &lt;!--begin added nav--&gt;
      &lt;div id="main-navigation" &gt;
          &lt;div id="nav"&gt;
          &lt;ul&gt;
              &lt;li class="first"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Me1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Me2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Me3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Web&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Print&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Photos&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact Me&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact Me1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact Me2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact Me3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!--end main navigation--&gt;
      &lt;!--end added nav--&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>*{ margin:0px; padding: 0px; }
  
  #nav {
       font-family: arial, sans-serif;
       position: relative;
       width: 390px;
       height:56px;
       font-size:14px;
       color:#000;
       margin: 0px auto;
  }
  
  #nav ul {
       list-style-type: none;
  }
  
  #nav ul li {
       float: left;
       position: relative;
  }
  
  #nav ul li a {
       text-align: center;
       border-right:1px solid #000;
       padding:20px;
       display:block;
       text-decoration:none;
       color:#000;
  }
  
  #nav ul li ul {
       display: none
  }
  
  #nav ul li:hover ul {
       display: block;
       position: absolute;
  }
  
  #nav ul li:hover ul li a {
       display:block;
       background:#12aeef;
       color:#ffffff;
       width: 110px;
       text-align: center;
       border-bottom: 1px solid #f2f2f2;
       border-right: none;
  }
  
  #nav ul li:hover ul li a:hover {
       background:#6dc7ec;
       color:#fff;
  }
  </code></pre>
  
  <p>Link to a <a href="http://ken-shoufer.com/navtest/testNav1.html" rel="nofollow">working example</a>.</p>
  
  <p>Thanks,
  Ken</p>