title: jQuery Slide Menu
body: <p>I am trying to make a menu that slides down sub menu items (+changes background color) when clicked on. 
  When a different menu item is clicked on, the other open should close (sub menu item slide back). I am using the html code below, 
  (I am hiding the sub1 and sub2 by using dispay:none;)</p>
  
  <p>Please view the code <a href="http://jsfiddle.net/kxvKA/" rel="nofollow">http://jsfiddle.net/kxvKA/</a></p>
  
  <p>At the moment all slides open together, I want one to open at a time, and when the other is clicked on. the first should close</p>
  
  <pre><code>&lt;ul class="nav"&gt;
              &lt;li class="mainnav"&gt;MAINNAV&lt;/li&gt;
                      &lt;li class="sub1"&gt;SUB1&lt;/li&gt;
                      &lt;li class="sub2"&gt;SUB2&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="nav"&gt;
              &lt;li class="mainnav"&gt;MAINNAV2&lt;/li&gt;
                      &lt;li class="sub1"&gt;SUB1&lt;/li&gt;
                      &lt;li class="sub2"&gt;SUB2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and JQuery code</p>
  
  <pre><code>$(".mainnav").on("click", function(){
      $(".sub1, .sub2").slideDown("fast");
      $( ".mainnav" ).animate({
          backgroundColor: "#3A3A3A", 
          }, 500 );
  });
  </code></pre>