title: Drop down horrizontal navi with jQuery
body: <p>I´ve got a special navigation and the structure may not be the best but i cant change it very much. This is a 3 level navigation.</p>
  
  <p>For example:
  You click on an level_1 nav item and the child level_2 and level_3 navigation appears.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="nav"&gt;
  &lt;nav class="mod_navigation block"&gt;
  &lt;ul class="level_1"&gt;
  &lt;li class="submenu sibling first selected"&gt;
  &lt;a class="submenu sibling first" href="#" title=""&gt;Lorem&lt;/a&gt;
  &lt;ul class="level_2" style="display: block;"&gt;
  &lt;li class="submenu first"&gt;
  &lt;a class="submenu first" href="" title=""&gt;Lorem ipsum dolor sit amet&lt;/a&gt;
  &lt;ul class="level_3"&gt;
  &lt;li class="first"&gt;
  &lt;li&gt;
  &lt;li&gt;
  &lt;li&gt;
  &lt;li&gt;
  &lt;li&gt;
  &lt;li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="submenu"&gt;
  &lt;li class="submenu last"&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="submenu sibling"&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But my js code only slides the content and not the background (css hover effect) item (.nav). Can you help me with my code?</p>
  
  <h2>JS Code</h2>
  
  <pre><code>var $topLevelItems = $("nav &gt; ul &gt; li");
  
      $topLevelItems.click(function() {
          if (!$(this).hasClass('selected')) {
              $topLevelItems.removeClass('selected')
                  .find('.level_2')
                  .slideUp();
  
              $(this).addClass('selected')
                  .find('.level_2')
                  .slideDown();
          }
      });
  </code></pre>
  
  <h2>Fiddle</h2>
  
  <p><a href="http://jsfiddle.net/DvG6H/2/embedded/result/" rel="nofollow">http://jsfiddle.net/DvG6H/2/embedded/result/</a></p>