title: Jquery Dropdown Menu: The Dropdown works fine but animation doesn't work
body: <p><a href="http://jsfiddle.net/jerrypeng0112/ahm7q1bq/" rel="nofollow">http://jsfiddle.net/jerrypeng0112/ahm7q1bq/</a>
  I've spent a while on this problem, The only way to make it work is to set a specific width for the <li> tag, but that would cause the long links word wrap. If I don't set it, it won't word wrap but the animation is not working.
  THis is the HTML</p>
  
  <pre><code>`&lt;body&gt;
      &lt;header id="header"&gt;
          &lt;nav&gt;
              &lt;ul id="main"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    &lt;a href="#"&gt;About&lt;/a&gt;
  
                      &lt;ul class="hidden"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About 1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About 2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About 3&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    &lt;a href="#"&gt;Services&lt;/a&gt;
  
                      &lt;ul class="hidden"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Services 1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Services 2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Services 3&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    &lt;a href="#"&gt;History&lt;/a&gt;
  
                      &lt;ul class="hidden"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;The History of This Site&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;The History of The Web&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;The History of Whatever&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  &lt;/body&gt;`
  </code></pre>
  
  <p>This is the CSS</p>
  
  <pre><code>body {
      margin:0;
      padding:0;
      height:1000px;
      background: #39a;
      font-family:arial;
  }
  header {
      z-index:2;
      position: fixed;
      width: 100%;
      height: 60px;
      background: #222;
  }
  nav {
      float:left;
  }
  nav ul {
      list-style-type:none;
      margin:0;
      padding:0;
  }
  nav ul li {
      display:inline-block;
      float:left;
  }
  nav ul li a {
      display:block;
      width:80px;
      height:60px;
      text-align:center;
      text-decoration:none;
      line-height:60px;
      color:white;
      background:#404040;
  }
  nav ul li a:hover {
      background:darkgray;
  }
  nav ul li:hover ul {
      display:block;
  }
  nav ul li:hover ul a {
      background:#404040;
      color:white;
      height:60px;
      line-height:60px;
  }
  ul.hidden {
      display:none;
      position:absolute;
      border-top:white solid 2px;
  }
  ul.hidden li {
      display:block;
      float:none;
  }
  ul.hidden li a {
      width:auto;
      min-width:80px;
      padding:0 20px;
  }
  ul.hidden li a:hover {
      background:darkgray;
  }
  </code></pre>
  
  <p>This is the Script</p>
  
  <pre><code>$(document).ready(function () {
      var width = $(window).width();
      if (width &gt; 800) {
          $('ul li').hover(function () {
              $('ul.hidden'.this).filter(':not(:animated)').slideDown(500);
          },
  
          function () {
              $('ul.hidden'
              this).fadeOut(500);
          });
      }
  });
  </code></pre>