title: jQuery Hover Effect for NavBar not working?
body: <p>For some reason, I just can't get the hover effect to work<br>
  HTML:</p>
  
  <pre><code>&lt;div id="navbarcontainer"&gt;
      &lt;ul&gt;
          &lt;li id="left" class="current"&gt;
              &lt;a id="current"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dependant1"&gt;
              &lt;a id="dependant1"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li id="right" class="dependant2"&gt;
              &lt;a id="dependant2"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#navbarcontainer {
  margin: 0;
  padding: 0;
  height: 50px;
  background: #01216D;
  }
  
  #navbarcontainer ul {
      clear: both;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  #navbarcontainer li {
      display: inline-block;
      height: 50px;
      width: 100px;
      list-style: none;
      text-align: center;
      -moz-transition: .5s;
      -o-transition: .5s;
      -webkit-transition: .5s;
      transition: .5s;
      /* Firefox 4 */
      /* Opera */
      /* Safari and Chrome */
  }
  
      #navbarcontainer ul li a {
          text-decoration: none;
          line-height: 50px;
          width: 100px;
          font-size: 20px;
          font-family: Calibri;
          cursor: pointer;
      }
  
  #left {
      margin-right: 40px;
      margin-left: 20px;
  }
  
  #right {
      margin-left: 40px;
  }
  
  .current {
      background: #fff;
  }
  
  #current {
      color: #01216D;
  font-weight: bold;
  }
  
  #dependant1, #dependant2 {
     color: #fff;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$("#dependant1").hover(function () {
      $('.dependant1').stop().animate({background: '#fff' }, "slow");
      $('#dependant1').stop().animate({color: '#01216D', 'font-weight': 'bold'}, "slow");
  }, function () {
      $('.dependant1').stop().animate({ background: 'none' }, "slow");
      $('#dependant1').stop().animate({color: '#fff', 'font-weight': 'normal'}, "slow");
  });
  </code></pre>
  
  <p>I feel like it has something to do with the jQuery, but I have it in the document.load, so I don't understand why it isn't working.</p>