Creating Multi Level Dropdown Menu CSS & jQuery

Written by Saran on June 4, 2013, Updated December 21, 2013

I've been playing with a layout that needed an good looking dropdown menu, so I've decided to create one myself, and also created this tutorial, hopefully it will prove to be useful to those who needs similar drop down menu. We will be creating 3 level sub menus in pure CSS, it should work without any JavaScript, and at the end we will add jQuery for that sliding effect.

Navigation HTML Structure

Let's start with a clean HTML structure for our navigation system, you should always avoid bulky JavaScript generated content for the drop down menu, because they aren't SEO friendly and doesn't work in JavaScript disabled browsers.As you can see the Markup contains series of nested <ul> and <li>, simple hierarchical menu, consisting of multiple levels. This menu can be identified with id="nav" in page and can be themed accordingly.

HTML

<ul id="nav">
<li class="site-name"><a href="#"> </a></li>
    <li class="facebook"><a href="#">Facebook</a>
        <ul>
        <li><a href="#">Facebook Pages</a></li>
        <li><a href="#">Facebook Groups</a></li>
        </ul>
    </li>
    <li class="yahoo"><a href="#">Yahoo</a>
        <ul>
        <li><a href="#">Yahoo Games »</a>            
            <ul>
                <li><a href="#">Board Games</a></li>
                <li><a href="#">Card Games</a></li>
                <li><a href="#">Puzzle Games</a></li>
                <li><a href="#">Skill Games »</a>
                <ul>
                    <li><a href="#">Yahoo Pool</a></li>
                    <li><a href="#">Chess</a></li>
                </ul>
                </li>
            </ul>
		</li>
        <li><a href="#">Yahoo Search</a></li>
        <li><a href="#">Yahoo Answsers</a></li>
        </ul>
    </li>
    <li class="google"><a href="#">Google</a>
        <ul>
        <li><a href="#">Google mail</a></li>
        <li><a href="#">Google Plus</a></li>
        <li><a href="#">Google Search »</a>
            <ul>
                <li><a href="#">Search Images</a></li>
                <li><a href="#">Search Web</a></li>
            </ul>
        </li>
        </ul>
    </li>
    <li class="twitter"><a href="#">Twitter</a>
            <ul>
                <li><a href="#">New Tweets</a></li>
                <li><a href="#">Compose a Tweet</a></li>
            </ul>
    </li>
</ul>

CSS

Here's basic CSS for the dropdown menu, right now it only contains basic borders and alignment, but we will continue to work on it adding backgrounds and icons, transforming it into elegant looking menu.

CSS

#nav{
	height: 39px;
	border-radius: 3px;
	min-width:500px;
	border:1px solid #ddd;
}	

#nav li{
	list-style: none;
	display: block;
	float: left;
	height: 40px;
	position: relative;
}

#nav li a{
	padding: 0px 10px 0px 10px;
	margin: 0px 0;
	line-height: 40px;
	border-right: 1px solid #ddd;
	height: 40px;
}

#nav ul{
	padding: 0px;
	width:170px;
	border:1px solid #ddd;
}
#nav .site-name,#nav .site-name:hover{
	padding-left: 10px;
	padding-right: 10px;
	width: 160px;
}
#nav .site-name a{
	width: 129px;
	overflow:hidden;
}
#nav li a{
	display: block;
}
#nav ul li {
	border-right:none;
	border-bottom:1px solid #DDDDDD;
	width:170px;
	height:39px;
}
#nav ul li a {
	border-right: none;
	border-bottom:1px solid #FFFFFF;
}

/* Sub menus */
#nav ul{
	display: none;
        visibility:hidden;
	position: absolute;
	top: 40px;
}
/* Third-level menus */
#nav ul ul{
	top: 0px;
	left:170px;
	display: none;
        visibility:hidden;
	border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
	top: 0px;
	left:170px;
	display: none;
        visibility:hidden;
	border: 1px solid #DDDDDD;
}

#nav ul li{
	display: block;
        visibility:visible;
}
#nav li:hover > ul{
	display: block;
        visibility:visible;
}

The idea is to override the default style rules of <ul> and <li> tags, here's few important things I've done here while styling the list elements for the dropdown menu.

Floated list elements to position them next to each other.
Set fixed height to floated elements.
Deeper level sub menus (<ul> tags) are positioned absolute, and are hidden : display: none;, while it's not being used.

Notice visibility:hidden; along with display:none in sub menus CSS declaration? As per this article, screen readers sometimes ignore display:none property, which can be easily avoided using the two properties together visibility:hidden; and display:none.To bring these hidden elements into visibility on mouse hover, we simply add display: block; in <li> hover selector. Optionally you can choose to use CSS3 transitions to fade in/out the hidden elements smoothly, but remember not all old browsers support CSS3.

After some more customization, here's the complete CSS for the dropdown menu. I've added background colors, icons and text shadows. I've tested it on latest Chrome, Firefox, Safari and IE8+, works great on these browsers, Ie7 needed some fix which I've included in the sample file.

#nav{
	height: 39px;
	font: 12px Geneva, Arial, Helvetica, sans-serif;
	background: #3AB3A9;
	border: 1px solid #30A097;	
	border-radius: 3px;
	min-width:500px;
	margin-left: 0px;
	padding-left: 0px;
}	

#nav li{
	list-style: none;
	display: block;
	float: left;
	height: 40px;
	position: relative;
	border-right: 1px solid #52BDB5;
}

#nav li a{
	padding: 0px 10px 0px 30px;
	margin: 0px 0;
	line-height: 40px;
	text-decoration: none;
	border-right: 1px solid #389E96;
	height: 40px;
	color: #FFF;
	text-shadow: 1px 1px 1px #66696B;
}

#nav ul{
	background: #f2f5f6; 
	padding: 0px;
	border-bottom: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	border-left:1px solid #DDDDDD;
	border-radius: 0px 0px 3px 3px;
	box-shadow: 2px 2px 3px #ECECEC;
	-webkit-box-shadow: 2px 2px 3px #ECECEC;
    -moz-box-shadow:2px 2px 3px #ECECEC;
	width:170px;
}
#nav .site-name,#nav .site-name:hover{
	padding-left: 10px;
	padding-right: 10px;
	color: #FFF;
	text-shadow: 1px 1px 1px #66696B;
	font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
	background: url(images/saaraan.png) no-repeat 10px 5px;
	width: 160px;
	border-right: 1px solid #52BDB5;
}
#nav .site-name a{
	width: 129px;
	overflow:hidden;
}
#nav li.facebook{
	background: url(../images/facebook.png) no-repeat 9px 12px;
}
#nav li.facebook:hover  {
	background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
}
#nav li.yahoo{
	background: url(../images/yahoo.png) no-repeat 9px 12px;
}
#nav li.yahoo:hover  {
	background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
}
#nav li.google{
	background: url(../images/google.png) no-repeat 9px 12px;
}
#nav li.google:hover  {
	background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
}
#nav li.twitter{
	background: url(../images/twitter.png) no-repeat 9px 12px;
}
#nav li.twitter:hover  {
	background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
}

#nav li:hover{
	background: #3BA39B;
}
#nav li a{
	display: block;
}
#nav ul li {
	border-right:none;
	border-bottom:1px solid #DDDDDD;
	width:170px;
	height:39px;
}
#nav ul li a {
	border-right: none;
	color:#6791AD;
	text-shadow: 1px 1px 1px #FFF;
	border-bottom:1px solid #FFFFFF;
}
#nav ul li:hover{background:#DFEEF0;}
#nav ul li:last-child { border-bottom: none;}
#nav ul li:last-child a{ border-bottom: none;}
/* Sub menus */
#nav ul{
	display: none;
	visibility:hidden;
	position: absolute;
	top: 40px;
}

/* Third-level menus */
#nav ul ul{
	top: 0px;
	left:170px;
	display: none;
	visibility:hidden;
	border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
	top: 0px;
	left:170px;
	display: none;
	visibility:hidden;
	border: 1px solid #DDDDDD;
}

#nav ul li{
	display: block;
	visibility:visible;
}
#nav li:hover > ul{
	display: block;
	visibility:visible;
}

The jQuery

Dropdown menu should work without JavaScript, but we can take advantage of powerful jQuery to add that slide or fade effect to our menu.

JQUERY

$(document).ready(function(){
	$("#nav li").hover(
	function(){
		$(this).children('ul').hide();
		$(this).children('ul').slideDown('fast');
	},
	function () {
		$('ul', this).slideUp('fast');            
	});
});

Download Demo

Tuck
30th Oct 2016 at 11:30 am
Hi, Nice menu. But if I have a slide on the page the drop down menu item will be behind the item. How can you always make the menu on top of all other elements?
Joseph
11th Mar 2016 at 11:58 pm
Hi, Thanks for posting! Question: in your example image, there are images in the main headers (Google, Yahoo). Did you include the code that shows how to display icons?
Ali
20th Nov 2015 at 10:56 pm
Thanks a lot , it's very beautifull .
Afzal
30th May 2015 at 11:34 am
i am very little familiar with IT can you help me where to insert this code in blogger
Ahmad Ali
30th Apr 2015 at 1:35 am
Its so nice because of simplicity and clarity. You have done a very good community work. Thanks a lot.