title: Why does this jquery dropdown not work?
body: <p>This code seems to show everything correctly but then when launched in the browser, the drop down doesn't work. The hover styling and everything works correctly except for the dropdown.
  Thank you.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;GS4 Concept Home Page&lt;/title&gt;
  &lt;link type="text/css" href="unicss.css" rel="stylesheet"/&gt;
  &lt;script src="Script/main.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="header"&gt;
      &lt;div class="nav"&gt;
          &lt;ul class="navigation"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Main Cat 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Main Cat 2 &lt;/a&gt;&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 2-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 2-2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 2-3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 2-4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 2-5&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Main Cat 3 &lt;/a&gt;&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 3-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 3-2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 3-3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 3-4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 3-5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 3-6&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Cat 3-7&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;div id="container"&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  body{
      background-image:url(Images/backgroundmain.jpg);
      min-width:100%;
      font-family: Arial, Helvetica,sans-serif;
      font-size:15px;
  }
  
  #header{
      background-color:#474747;
      width:100%;
      display:block;
  }
  
  #container{
      margin:auto;
      width:70%;
  }
  
  .navigation {
      margin:0;
      padding:0;
      list-style:none;
  }
  
  .navigation li {
      float:left;
      width:150px;
      position:relative;
  }
  
  .navigation li a {
      background:#262626;
      color:#fff;
      display:block;
      padding:8px 7px 8px 7px;
      text-decoration:none;
      border-top:1px solid #F2861D;
      text-align:center;
      text-transform:uppercase;
  }
  .navigation li a:hover {
      color:#F2861D;
  }
  
  .navigation ul {
      position:absolute;
      left:0;
      display:none;
      margin:0 0 0 -1px;
      padding:0;
      list-style:none;
      border-bottom:3px solid #F2861D;
  }
  
  .navigation ul li {
      width:150px;
      float:left;
      border-top:none;
  }
  
  .navigation ul a {
      display:block;
      height:15px;
      padding:8px 7px 13px 7px;
      color:#fff;
      text-decoration:none;
      border-top:none;
      border-bottom:1px dashed #6B6B6B;
  }
  
  .navigation ul a:hover {
      color:#F2861D;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function() {
      $('.navigation li').hover(
  
      function() {
          $('ul', this).fadeIn();
      }, function() {
          $('ul', this).fadeOut();
      });
  });
  </code></pre>