title: Jquery dropdown menu on hover or on click
body: <p>I have a menu which looks like the one below. I want the first-level childs to appear on hover OR on click (so it works on iPad as well). When hovering (or clicking) a firs-level child I want it's second level childs to appear if they exist. On hover out or when clicked on a different DOM-element all submenu's should be hidden again. </p>
  
  <p>Also when a user is on page I want to menu to be folded out until he hovers over or clicks on a different menu item so he can always see just where he is in the navigation.</p>
  
  <p>I am building this in Wordpress for a friend who should be able to create and change his navigation menu using the backend. Therefore adding specific classes or ID's to some elements is not an option.</p>
  
  <pre><code>&lt;style&gt;
  .sub-menu {display: none;}
  &lt;/style&gt;
  
  
  &lt;ul class="menu"&gt;
    &lt;li&gt;child 1
      &lt;ul class="sub-menu"&gt;
        &lt;li&gt;child 1.1
          &lt;ul class="sub-menu"&gt;
            &lt;li&gt;child 1.1.1&lt;/li&gt;
            &lt;li&gt;child 1.1.2&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;child 1.2
          &lt;ul class="sub-menu"&gt;
            &lt;li&gt;child 1.2.1&lt;/li&gt;
            &lt;li&gt;child 1.2.2&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;child 2
      &lt;ul class="sub-menu"&gt;
        &lt;li&gt;child 2.1&lt;/li&gt;
        &lt;li&gt;child 2.2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is what I came up with but it does not work. When hovering over child 1.1 both 1.1 and 1.2's siblings are shown.</p>
  
  <pre><code>$("ul.menu li").hover(function() { 
      $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
  } , function() {  
      $(this).find("ul.sub-menu").hide(); 
  });
  
  $("ul.menu li ul.sub-menu").hover(function() { 
      $(this).find("ul.sub-menu").slideDown(); 
  } , function() { 
      $(this).find("ul.sub-menu").hide(); 
  });
  </code></pre>