title: css responsive dropdown menu - more levels
body: <p>I have responsive dropdown menu.</p>
  
  <p><img src="https://i.stack.imgur.com/zjrrW.png" alt="drop-down"> <img src="https://i.stack.imgur.com/c2Roy.png" alt="mobile"></p>
  
  <p>I want to open submenu on hover/toogle. It work to 2nd submenu. </p>
  
  <p>But when I hover to 2nd submenu <strong>all other</strong> submenus will open. How to prevent this to menu will work correctly?</p>
  
  <h2>Question:</h2>
  
  <p>How to open menu on hover/toggle in deeper sub-menus ?
  (prevent to open all submenus)</p>
  
  <h2>JSFIDDLE:</h2>
  
  <p><a href="http://jsfiddle.net/mikehudak/BrPeY/" rel="nofollow noreferrer">JsFiddle example</a></p>
  
  <h2>HTML:</h2>
  
  <pre><code>    &lt;a class="toggleMenu" href="#"&gt;Menu&lt;/a&gt;
      &lt;ul class="menu"&gt;
          &lt;li class="first activeSelected"&gt;&lt;a href="#"&gt;Menu 0&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu 0&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu 0&lt;/a&gt;        
              &lt;ul class="level1"&gt;
                  &lt;li class="first"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="last"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
                      &lt;ul class="level2"&gt;
                          &lt;li class="first"&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;        
                              &lt;ul class="level3"&gt;
                                  &lt;li class="first"&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;        
                                      &lt;ul class="level4"&gt;
                                          &lt;li class="first"&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="last"&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="last"&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="last"&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu 0&lt;/a&gt;&lt;/li&gt;
          &lt;li class="last"&gt;&lt;a href="#"&gt;Menu 0&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt; 
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>body, nav {margin: 0; padding: 0;}
  body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .container {
      width: 90%;
      max-width: 900px;
      margin: 10px auto;
  }
  
  a {text-decoration: none;}
  ul, li, a  {margin: 0; padding: 0;}
  
  .toggleMenu {
      display: none;
      background: #111;
      padding: 10px 15px;
      color: #fff;
  }
  .menu {
      list-style: none;
      *zoom: 1;
      background:#111;
  }
  .menu:before,
  .menu:after {
      content: " "; 
      display: table; 
  }
  .menu:after {
      clear: both;
  }
  .menu ul {
      list-style: none;
      width: 9em;
  }
  .menu a {
      padding: 10px 15px;
      color:#fff;
  }
  .menu li {
      position: relative;
  }
  .menu &gt; li {
      float: left;
      border-top: 1px solid #000;
  }
  .menu &gt; li &gt; .parent {
      background-image: url("images/downArrow.png");
      background-repeat: no-repeat;
      background-position: right;
  }
  .menu &gt; li &gt; a {
      display: block;
  }
  .menu li  ul {
      position: absolute;
      left: -9999px;
  }
  .menu &gt; li.hover &gt; ul {
      left: 0;
  }
  .menu li li.hover ul {
      left: 100%;
      top: 0;
  }
  .menu li li a {
      display: block;
      background: #222;
      position: relative;
      z-index:100;
      border-top: 1px solid #111;
  }
  .menu li li li a {
      background:#333;
      border-top: 1px solid #222;
  }
  .menu li li li li a {
      background:#444;
      border-top: 1px solid #333;
  }
  .menu li li li li li a {
      background:#555;
      border-top: 1px solid #444;
  }
  
  @media screen and (max-width: 480px) {
      .active {
          display: block;
      }
      .menu &gt; li {
          float: none;
      }
      .menu &gt; li &gt; .parent {
          background-position: 95% 50%;
      }
      .menu li li .parent {
          background-image: url("images/downArrow.png");
          background-repeat: no-repeat;
          background-position: 95% 50%;
      }
      .menu ul {
          display: block;
          width: 100%;
      }
      .menu &gt; li.hover &gt; ul , .menu li li.hover ul {
          position: static;
      }
  
  }
  </code></pre>
  
  <h2>JS:</h2>
  
  <pre><code>var ww = document.body.clientWidth;
  
  $(document).ready(function() {
      $(".menu li a").each(function() {
          if ($(this).next().length &gt; 0) {
              $(this).addClass("parent");
          };
      })
  
      $(".toggleMenu").click(function(e) {
          e.preventDefault();
          $(this).toggleClass("active");
          $(".menu").toggle();
      });
      adjustMenu();
  })
  
  $(window).bind('resize orientationchange', function() {
      ww = document.body.clientWidth;
      adjustMenu();
  });
  
  var adjustMenu = function() {
      if (ww &lt; 480) {
          $(".toggleMenu").css("display", "inline-block");
          if (!$(".toggleMenu").hasClass("active")) {
              $(".menu").hide();
          } else {
              $(".menu").show();
          }
          $(".menu li").unbind('mouseenter mouseleave');
          $(".menu li a.parent").unbind('click').bind('click', function(e) {
              // must be attached to anchor element to prevent bubbling
              e.preventDefault();
              $(this).parent("li").toggleClass("hover");
          });
      } 
      else if (ww &gt;= 480) {
          $(".toggleMenu").css("display", "none");
          $(".menu").show();
          $(".menu li").removeClass("hover");
          $(".menu li a").unbind('click');
          $(".menu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
              // must be attached to li so that mouseleave is not triggered when hover over submenu
              $(this).toggleClass('hover');
          });
      }
  }
  </code></pre>