Databases
StackOverflow2013
Postsdbo
POcss responsive dropdown menu - more levels
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss responsive dropdown menu - more levels
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload