title: jQuery Custom Vertical Drop Down Menu
body: <p>I have a problem in my drop-down-menu (here's my fiddle: <a href="http://jsfiddle.net/iamthestig/Vhs2v/" rel="nofollow">http://jsfiddle.net/iamthestig/Vhs2v/</a>). When you click products there's a drop-down-menu on the left side, but the other navigation elements in the bottom slide down too. Is there a way to stop that from happening? I've been reading some tutorials for the drop-down-menu for a couple of hours. And that's why I have this code. But I can't achieve what I want to happen. Hope you guys can help me out. Thanks!</p>
  
  <p>Here's my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;nav&gt;
       &lt;ul class="nav"&gt;
           &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li class="products"&gt;
               &lt;a href="#"&gt;Products&lt;/a&gt;
                   &lt;ul class="subnav-products clearfix"&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Product One&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Product Two&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Product Three&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Product Four&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Product Five&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Product Six&lt;/a&gt;&lt;/li&gt;
                   &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;             
  &lt;/nav&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>CSS</p>
  
  <pre><code>    * {
      margin: 0;
      padding: 0;
  }
  
  body {
      width: 100%;
      height: 100%;
      background: darkgray;
  }
  
  .nav {
      width: 100px;
      position: absolute;
      top: 30px;
      right: 20px;
      list-style: none;
  }
  
  .nav li {
      margin: 0 0 10px 0;
      font-family: Helvetica;
      font-size: 11px;
      text-align: right;
      text-transform: uppercase;
      line-height: 1;
  }
  
  .nav li:nth-child(5) {
      margin: 0;
  }
  
  .nav li a {
      padding: 10px 10px 10px 0;
      color: white;
      text-decoration: none;
      background: dimgray;
      display: block;
  }
  
  .subnav-products {
      width: 300px;
      position: relative;
      top: -31px;
      left: -300px;
      display: none;
  }
  .subnav-products li {
      width: 150px;
      margin: 0;
      text-align: center;
      float: left;
  }
  
  .subnav-products li a {
      display:block;
  }
  
  .clearfix:before,
  .clearfix:after {
      content: " "; /* 1 */
      display: table; /* 2 */
  }
  
  .clearfix:after {
      clear: both;
  }​
  </code></pre>
  
  <p>JS/JQUERY</p>
  
  <pre><code>$(".products").on("click", function(){
      $(".subnav-products").slideToggle();
      $(this).toggleClass("active");
  });​
  </code></pre>