Develop Reference

styling third level of menu not working

In my attempt to create mega menu, im stuck with styling third level of submenu. First submenu (li ul) is not displayed (display: none). Then i have jquery script that shows that submenu on hover ( li ul - first level ). If window is less then 768px then the click function is activated (for touch screens).
My problem is when i want to style the third level sub menu ( submenu of submenu - li - ul - li - ul ) no style is applied - i want it to be shown always, but is hidden, display: none is applied on that UL but i styled it as display: block. So its only shown when i hover its LI element (li ul li hover).
So basically what im trying to do is that first submenu (li - ul) is activated on hover (or click for phones) but that second submenu (submenu of submenu) is allways visible. When i try to style it i access it like this: li ul li ul, and that is not working. How should i access it? Also when i try to hover that third level submenu, menu closes and i did not specify it like that in jquery.
HTML
<div class="menu-container">
<ul class="menu">
<li>Home
<ul>
<li>Ovo je nesto
<ul>
<li>aaa</li>
</ul>
</li>
<li>Ovo je nesto</li>
<li>Ovo je nesto</li>
<li>Ovo je nesto</li>
</ul>
</li>
<li>Who are we?
<ul>
<li>This is mega menu</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
.menu-container {
width: 80%;
margin: 0 auto;
background: #333;
}
.menu {
margin: 0 auto;
list-style: none;
padding: 0;
position: relative;
}
.menu:before,
.menu:after {
content: "";
display: table;
}
.menu:after {
clear: both;
}
.menu li {
float: left;
background: #e9e9e9;
padding: 0;
margin: 0;
}
.menu li a {
text-decoration: none;
padding: 1.5em 3em;
display: inline-block;
outline: 0 none;
}
.menu li ul {
display: none;
width: 100%;
background: #333;
padding: 20px;
position: absolute;
z-index: 99;
left: 0;
color: #fff;
margin: 0;
}
.menu li ul li {
margin: 0;
padding: 0;
list-style: none;
width: 25%;
background: none;
float: left;
}
.menu li ul li a {
color: #fff;
padding: .2em 0;
}
.menu li ul li ul {
display: block;
}
.menu li ul li ul li {
display: block;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
960px
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
TABLETS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
MOBILE 100%
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (max-width: 767px) {
.menu > li {
float: none;
width: 100%;
}
.menu > li > ul {
position: relative;
}
.menu > li > ul li {
float: none;
width: 100%;
}
}
Jquery
$(document).ready(function () {
$(".menu li").hover(function () {
if ($(window).width() > 767) {
$('.menu ul li ul').not($(this).children("ul").fadeToggle(200)).hide();
}
});
$(".menu li").click(function () {
if ($(window).width() <= 767) {
$('.menu ul li ul').not($(this).children("ul").fadeToggle(200)).hide();
}
});
});
Demo: http://codepen.io/riogrande/pen/ZbaeKa

The CSS selector .menu li ul li ul li will select all list items in the 3rd level submenu or lower. As sodawillow mentioned, you can either use classes or the direct descendent selector > to fine tune styles for specific submenu levels.
The following snippets will fix the submenu hovering effect to be more intuitive - by having all menus hidden until its parent is hovered over.
JavaScript - replace the entire fade/hide statement with this:
$(this).children("ul").fadeToggle(200);
CSS:
.menu li ul li ul {
display: none;
}
If you want the second submenu to be visible when the first submenu is visible, the jQuery selector should be $(".menu > li") instead to select just the first submenu, and the CSS can be left as is.

These selectors may target the same li elements, the first one is very broad and cancels the rules for the following ones :
.menu li ul {
display: none;
width: 100%;
background: #333;
padding: 20px;
position: absolute;
z-index: 99;
left: 0;
color: #fff;
margin: 0;
}
.menu li ul li {
margin: 0;
padding: 0;
list-style: none;
width: 25%;
background: none;
float: left;
}
.menu li ul li ul {
display: block;
}
.menu li ul li ul li {
display: block;
}
You may use the > selector to target only direct children, but I'd strongly advise using classes instead, to help separating styles between levels :
<div class="menu-container">
<ul class="menu-level1">
<li>Home
<ul class="menu-level2">
<li>Ovo je nesto
<ul class="menu-level3">
<li>aaa</li>
</ul>
</li>
<li>Ovo je nesto</li>
<li>Ovo je nesto</li>
<li>Ovo je nesto</li>
</ul>
</li>
<li>Who are we?
<ul class="menu-level2">
<li>This is mega menu</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>

how to display sub menus when hover

I have a vertical menu like this :
<ul>
<li>Level 1 menu
<ul>
<li>Level 2 item</li>
<li>Level 2 item</li>
</ul>
</li>
<li>Level 1 menu
<ul>
<li>Level 2 item</li>
<li>Level 2 item</li>
</ul>
</li>
<li>Level 1 menu</li>
</ul>
Now i need to display the Level 2 items once i hover so i added this line
#bar ul li:hover ul { display: block; }
in css but it didn't make any difference, and i have no other display tag in my css
#bar ul { list-style: none; margin: 0px; padding: 0px; }
#bar ul li { padding: 4px 0px 4px 0px; }
#bar ul li a { color: #FFF; font-size: 16px; }
#bar ul li a:hover { font-weight:bold }
#bar ul li ul li { padding: 4px 0px 4px 0px; margin-left:10px;}
#bar ul li ul li a { padding-left: 0px; font-size: 10px; }

As I understand right, you need to add #bar ul li ul { display: none; }
Here is example

#bar ul li ul { display: none;}
#bar ul li:hover ul { display: block; }
and also wrap your lists in element with id #bar
here is the demo

You should try using child selectors > (which are faster) with descendant ones wisely used. But a 5 level descendant selector is overkill.
Basically, first use a single descendant selector to affect all of them, and then a child one to override and set styles for the first level.
Something like this:
#menu { list-style: none; margin: 0px; padding: 0px; }
#menu li { padding: 4px 0px 4px 0px; margin-left:10px; }
#menu > li { padding: 4px 0px 4px 0px; margin-left:0; }
#menu a { color: #FFF; padding-left: 0px; font-size: 10px; }
#menu > li > a { font-size: 16px; }
#menu a:hover { font-weight:bold }
#menu ul { display: none; }
#menu li:hover > ul { display: block; }
Demo

css responsive dropdown menu - more levels

I have responsive dropdown menu.
I want to open submenu on hover/toogle. It work to 2nd submenu.
But when I hover to 2nd submenu all other submenus will open. How to prevent this to menu will work correctly?
Question:
How to open menu on hover/toggle in deeper sub-menus ?
(prevent to open all submenus)
JSFIDDLE:
JsFiddle example
HTML:
<a class="toggleMenu" href="#">Menu</a>
<ul class="menu">
<li class="first activeSelected">Menu 0</li>
<li>Menu 0</li>
<li>Menu 0
<ul class="level1">
<li class="first">Menu 1</li>
<li>Menu 1</li>
<li class="last">Menu 1
<ul class="level2">
<li class="first">Menu 2
<ul class="level3">
<li class="first">Menu 3</li>
<li>Menu 3</li>
<li>Menu 3
<ul class="level4">
<li class="first">Menu 4</li>
<li>Menu 4</li>
<li class="last">Menu 4</li>
</ul>
</li>
<li>Menu 3</li>
<li class="last">Menu 3</li>
</ul>
</li>
<li>Menu 2</li>
<li class="last">Menu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu 0</li>
<li class="last">Menu 0</li>
</ul>
CSS:
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 > li {
float: left;
border-top: 1px solid #000;
}
.menu > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.menu > li > a {
display: block;
}
.menu li ul {
position: absolute;
left: -9999px;
}
.menu > li.hover > 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 > li {
float: none;
}
.menu > li > .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 > li.hover > ul , .menu li li.hover ul {
position: static;
}
}
JS:
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".menu li a").each(function() {
if ($(this).next().length > 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 < 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 >= 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');
});
}
}

In your CSS please change
.menu li li.hover ul {
left: 100%;
top: 0;
}
to
.menu li li.hover > ul {
left: 100%;
top: 0;
}
This seems to work but need more fine tuning. As far as I have been able to understand the problem. This could be related to accessing the immediate child.

I would like a menu submenu using javascript or any other way possible

I've searched and tried multiple way to accomplish this to no avail...
i have provided my current code below....please feel free to critique and provide with any help necessary...
<script src="jquery.js"></script>
<div id="navigation">
<p>Leave A Note</p>
<ul id="menu">
<li>Artist<ul>
<li>Sketchbook</li><li>Music</li><li>Artwork</li><li>
Media</li><li>Words</li></ul>
</li>
<li>UI/UX Developer<ul><li>Portfolio</li><li>Resume</ul></li></div>
<!--above is the html container-->
<!--Now add javascript to control the hiding and such-->
<script>
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';
$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();
hideMenu = function() {
$('#navigation ul#menu').hide();
$('#navigation').removeClass('Open');
$('#toggle').text(showMenuText);
}
$('#toggle').click(function(event){
event.stopPropogation(); event.preventDefault();
$('#navigation ul#menu').toggle();
$('#navigation').toggleClass('open');
var toggleText = $('#toggle').text();
(toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);});
$('ul#menu > li > a').click(function(event){
$this = $(this);
if ($this.hasClass('page') ) parent.location = $this.attr('href');
if ($this.hasClass('home') ) { parent.location = '/'; }
event.preventDefault(); event.stopPropagation();
if( $this.hasClass('active') ) var justclosed = true;
$('a.active').removeClass('active').next('ul').hide();
if(!justclosed) $this.addClass('active').next('ul').show();
});
</script>
here
the javascript is not doing as what i expect it to..as the unordered lists are still showing as a list and are not hidden....any advice would be greatly appreciated!..

You're missing a closing li at this line:
<li>UI/UX Developer<ul><li>Portfolio</li><li>Resume</ul></li></div>
This should be
<li>UI/UX Developer<ul><li>Portfolio</li><li>Resume</li></ul></li></div>
Maybe this is causing the javascript issue.

Drop Down menus can be done by Pure CSS with relative and absolute elements.
Consider the following HTML:
<ul>
<li>Level 1</li>
<li>
Level 2
<ul>
<li>Level 2-1</li>
<li>Level 2-2</li>
<li>Level 2-3</li>
<li>Level 2-4</li>
<li>Level 2-5</li>
</ul>
</li>
<li>Level 3</li>
<li>Level 4</li>
<li>Level 5</li>
</ul>
Horizontal
Working jsFiddle Demo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
position: absolute;
top: 20px;
left: -1px;
display: none;
}
ul ul li + li {
margin-left: 0;
margin-top: -1px;
}
ul li {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
color: blue;
border: 1px solid blue;
width: 150px;
float: left;
text-align: center;
cursor: pointer;
height: 20px;
}
ul li + li {
margin-left: -1px;
}
ul li:hover {
background: #b0e0e6;
}
ul li:hover ul {
display: block;
}
Vertical
Working jsFiddle Demo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
position: absolute;
top: -1px;
left: 150px;
display: none;
}
ul li {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
color: blue;
border: 1px solid #4169e1;
width: 150px;
text-align: center;
cursor: pointer;
height: 20px;
}
ul li + li {
margin-top: -1px;
}
ul li:hover {
background: #b0e0e6;
}
ul li:hover ul {
display: block;
}

Website Menu Bar Drop Down

I am working on a website for a client. For the menu/navigation bar, I created one for them (they were very specific) with dropdowns, but there is one problem--when you mouse over one of the items on the dropdown, it dissappears--check it out here http://www.brandonsdesigngroup.com/menu-expamle.html.
for the code, I call jquery from google API's, then there is the javascript, the CSS, and the actual content (in an unordered list).
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
CSS:
<style type="text/css">
.nav, .nav ul {
list-style: none;
margin: 0;
padding: 0;
height:20px
}
.nav {
z-index: 100;
position: relative;
}
.nav li {
border-left: 0px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font:1.22em/25px "Arial Narrow", Arial, sans-serif letter-spacing:5px;
color: #FFFFFF;
display: block;
padding: 0 10px;
text-decoration: none;
text-style: narrow;
margin-right:26px;
}
.nav li a:hover {
margin-right:26px;
color: #FFFFFF;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
color: #FFFFFF;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
color: #FFFFFF;
height:20px;
background-image: url(menubar/transparent.png);
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
color:#FFFFFF;
background-image:url(menubar/transparent.png);
}
.nav ul {
border-bottom: 0px solid #FFFFFF;
list-style: none;
margin: 0;
width: 100px;
position: absolute;
top: -99999px;
left: 0px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 22px;
}
.nav ul li {
border: 0;
float: none;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:10px;
}
.nav ul a {
border: 0px solid #000;
border-bottom: 0;
padding-right: 50px;
margin-bottom: 0px;
width: 130px;
white-space: nowrap;
}
.nav ul a:hover {
color: #FFFFFF;
}
</style>
<style type="text/css">
body {
width: auto;
height: auto;
background-color: #3A2C21;
}
</style>
HTML:
<td background="images/menu_bg.gif" height="25"><ul id="nav-one" class="nav">
<li>
HOME
</li>
<li>
PROFILE
<ul>
<li>ABOUT</li>
<li>PEOPLE</li>
<li>SERVICES</li>
<li>TRADE SHOWS</li>
</ul>
</li>
<li>
PORTFOLIO
<ul>
<li>ARTISTIC TILE</li>
<li>ATLANTIS</li>
<li>BLANCO</li>
<li>BUTLER"S OF FAR HILLS</li>
<li>HAMPTON FORGE</li>
<li>HILAND H. TURNER</li>
<li>MIELE</li>
<li>POGGENPOHL</li>
<li>THG FAUCETS</li>
<li>TOP KNOBS</li>
<li>VIXEN HILL</li>
</ul>
</li>
<li>
PUBLIC RELATIONS
<ul>
<li>PRESS ATTENTION</li>
<li>FRANK PR</li>
<li>HITS</li>
<li>MORE HITS</li>
<li>LEVERAGING PR</li>
</ul>
</li>
<li>
CONTACT
</li>
</ul>

Problem #1: Menu disappears before cursor can reach submenu.
Usually this is due to a gap between the <li> tag and the subnavigation <ul>. A gap of even one pixel will cause the navigation to disappear before the cursor can reach the submenu.
For instance, add a padding: 0 0 10px; to .nav li in your CSS, and the problem goes away.
You could also set a specific height for the <li> to cover the problem, too.
Problem #2: Menu disappears when cursor runs over the image slideshow.
As to the problem of your menu disappearing when you reach the point where your image slideshow and menu collide, that's due to a z-index problem.
You should set the .nav to have a z-index: 200 (or anything greater than 100, according to your slideshow -- I try to go overboard). This will make sure it sits above the gallery.

Javascript
<script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
html
Already a Member? Login
Become a Member?
Signup
Army
Navy
Airforce

I would use the Hover Intent plug-in. It is designed for exactly this kind of usage and helps provide a more robust dropdown.