Responsive css menu with multiple levels - css

Question

am having a problem getting multiple levels working on a responsive css menu, the base of the menu i have followed this tutorial on tuts.com
I need more than 2 sub levels on this menu for my site, though when i add the extra 's to the html, the extra level is not working as it should, am sure its possible to add an extra level to the original menu, but i cant figure out what extra css i need, i had tried adding extra css code for li li li li but thats not working for me.
the extra level displays wwith the 2nd sublevel, where it should only display for the hover of the 2nd sub-menu.
i have created a jsfiddle (my first one) here: http://jsfiddle.net/DizzyHigh/Bpubu/4/
html:
<div id="left_container"></div>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test"> HOME
</li>
<li> LOCATIONS
<ul class="nav">
<li> Boroughs
<ul class="nav">
<li> Enfield
<ul>
<li>E-Locations
</li>
<li>E-Unit Bases
</li>
<li>E-Parking
</li>
</ul>
</li>
<li> Barnet
<ul>
<li>B-Locations
</li>
<li>B-Unit Bases
</li>
<li>B-Parking
</li>
</ul>
</li>
</ul>
</li>
<li> Maps
<ul class="nav">
<li> Enfield map
<ul>
<li>ME-Locations
</li>
<li>ME-Unit Bases
</li>
<li>ME-Parking
</li>
</ul>
</li>
<li> Barnet Map
<ul>
<li>MB-Locations
</li>
<li>MB-Unit Bases
</li>
<li>MB-Parking
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> CONTACT
</li>
<li> LINKS
</li>
</ul>
</div>
<div id="right_container"> </div>
css:
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
JS:
$(document).ready(function() {
var ww = document.body.clientWidth;
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav 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 >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav 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');
});
}
}
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
})
can any css gurus point me in the right direction?

Answer 1

Bryn try the follwing code:
I use 'NormalMenu' class for css hover event on normal menu
Java Script
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$('.nav').removeClass('NormalMenu').find('ul').hide();
$(".nav li a").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
var _sub = $(this).siblings('ul')
if($(_sub).is(':visible')){
$(_sub).hide();
$(_sub).find('ul').hide();
}else{
$(_sub).show();
}
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav li a").unbind('click');
$(".nav").show().addClass('NormalMenu').find('ul').removeAttr('style');
}
}
CSS
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
/* background-image: url("images/downArrow.png");*/
background-repeat: no-repeat;
background-position: right;
}
ul.NormalMenu ul{
width: 100%;
display:none;
position: absolute;
}
ul.NormalMenu li{
line-height:40px;
}
ul.NormalMenu li:hover > ul{
width: 100%;
display:block;
left:0;
}
ul.nav ul li{
background: #1d7a62;
}
ul.NormalMenu li li:hover> ul{
width: 100%;
display:block;
top:0;
left:100%;
}
ul.nav ul li li{
background: #1d7a00;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
/*background-image: url("images/downArrow.png");*/
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.nav ul{
margin-left:5%;
width: 95%;
}
ul.nav li{
line-height:30px;
}
}
See Demo: http://jsfiddle.net/ducwidget/Bpubu/21/

Answer 2

you can check this out ...I have made this menu in Plain html5 and css https://github.com/Saransh27/Dashboard. You can always extend it to you needs and let me know if you have any questions.