Drop Down Menu in HTML/CSS with 3 Levels Deep

Posted on December 18, 2013 by Dan Doicaru in HTML/CSS Category with Hard Difficulty

Learn to create a simple horizontal drop down menu in html and css with three levels deep. Drop down menu will work in all modern browsers, including Internet Explorer 7. We will use the same html structure as WordPress, so you can use the css on your menu too.

Video Tutorial

What You'll Need

For this tutorial you will need to have 2 empty files prepared. One html file and one css file. To make the drop down menu functional you will mostly need css, so you can have a separate css file which is recommended to have it like that, or have it between the <head> using the <style> tags.

HTML and CSS File

Writing the Main HTML Structure

Open "index.html" in any editor you have (Notepad++, Dreamweaver etc.) to start writing the html part. First, start with main structure of the document (doctype, document title, head tags etc). In this tututorial we will use XHTML 1.0 Transitional Doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Drop Down Menu in HTML and CSS with 3 Levels - Working in All Browsers</title>
	<link rel="stylesheet" href="styles.css" />
</head>
<body>

</body>
</html>

HTML Code for Drop Down Menu

Now that you have the main html structure done, you can start writing the html code for your drop down menu, between the <body> tags . This will be created using unordered list <ul>.

Note that our drop down menu will have 3 levels deep, which is perfect for blogs or any other websites. There is an additional <div> to use it as background for your menu. All the code below was re-done and last updated in 17 June 2015.

<div class="menuBackground">
	<ul class="dropDownMenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Web Design</a>
			<ul>
				<li><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">JS</a></li>
			</ul>
		</li>
		<li><a href="#">Programming</a>
			<ul>
				<li><a href="#">C++</a></li>
				<li><a href="#">WordPress</a>
					<ul>
						<li><a href="#">Hacks</a></li>
						<li><a href="#">Plugins</a></li>
						<li><a href="#">Shortcodes</a></li>
					</ul>
				</li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">jQuery</a></li>
			</ul>
		</li>
		<li><a href="#">Resources</a>
			<ul>
				<li><a href="#">Icons</a></li>
				<li><a href="#">Fonts</a></li>
				<li><a href="#">Wallpapers</a></li>
			</ul>
		</li>
		<li><a href="#">Tips and Tricks</a></li>
	</ul>
</div>

Until now your drop down menu should look very simple and without any style, like in the image below.

Drop Down Menu with No Styles

Understand How Drop Down Menu Works

Without any css styles, your drop down menu looks simple and horizontal. With the help of css, we will make it look vertical and with a decent design.

In the CSS structure you must refer to your elements by how deep they will go. For example, to refer on the third <ul>  and deeper you can do it like this:

.dropDownMenu ul ul {
	list-style: none;
}

To refer strictly and only for the third <ul> you must use the children ">" selector. This means the rules will be applied only for the child elements that are inside that element. For example, if you want to select only the <li> elements inside the third <ul> you must do it like this:

.dropDownMenu > ul > li > ul > li {
	/* applying css only for list items inside the second ul */
}

Note that the first <ul> is used under the class name dropDownMenu. Assuming that you are using WordPress, menu is generated automatically and you have access only on the first <ul> to set a class.

While is not recommended using a lot of descendant css selectors, as specified in this older article why, we don't really have a choice when styling a drop down menu in WordPress, but if you have full control over the code you can have classes for every <ul> tag in your code.

First of everything we need to set margins and paddings of all tags and elements to zero and set the <body> defaults (font size, font family etc). Check the code below:

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

Styling Your First Level Drop Down Menu with CSS

Great, now you are ready to write some styles for your drop down menu, so let's begin with the main <ul> together with his elements and menu background. In my example, main links will be on a single row. If you want to insert breaking space, you are free to do it as it will work without problems. I didn't set any height on elements.

/* Menu General Styles */
.menuBackground {
	background: brown;
}
.dropDownMenu a {
	color: #FFF;
}
.dropDownMenu,
.dropDownMenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dropDownMenu li {
	position: relative;
}
.dropDownMenu a {
	padding: 10px 20px;
	display: block;
	text-decoration: none;
}
.dropDownMenu a:hover {
	background: #000;
}


/* Level 1 Drop Down Menu */
.dropDownMenu > li {
	display: inline-block;
	vertical-align: top;
	margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
.dropDownMenu > li:first-child {
	margin-left: 0;
}
.dropDownMenu > li > a {}
.dropDownMenu > li > a:hover {}

If you refresh your page, you will see a mess! Don't worry, this is normal because we didn't created the css for the other sub-menus.

Drop Down Menu with CSS Only on First UL

Styling the Level 2 Drop Down Menu

To make things work, it is necessary to add the "position: absolute" property and "z-index: 999". Z-index is similar to layers from Photoshop. All elements are using by default z-index as 1. If you set a higher value for another element, it will be visible above the other element with lower value. The number can be as bigger as you need.

You will also notice a property top: 100%;. This means that sub-menus will appear under their parent elements (exactly as 100% of the parent element height). To see the difference you can try remove this line and add it again when you are done.

Below is the code for the level 2 sub-menu, which you can add a fixed width such as 200 pixels or you can let it without width (that means it will set the width on how bigger the list items are).

/* Level 2 */
.dropDownMenu > li > ul {
	text-align: left;
	width: auto; /* change auto value with 200px if you want a bigger menu */
	display: none;
	background: #5DBB04;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
}
.dropDownMenu > li:hover > ul {
	display: block;
}
.dropDownMenu ul li a {}
.dropDownMenu ul li a:hover {}

Now everything should look good, except the Level 3 sub-menu. Refresh the page and you should have something like the image below:

Drop Down Menu with Level 2 Styles

Styling the Level 3 Drop Down Menu

Awesome! Until now everything looks perfect and your drop down menu looks fantastic and working fine. To align the level 3 drop down menu properly (on the right) we will use position: absolute and left: 100%;. Because the menu will appear on the right, the top property will be now 0 and the left property should be the total width of the menu, which means 100%.

/* Level 3 */
.dropDownMenu > li > ul > li > ul {
	text-align: left;
	display: none;
	background: #E7B400;
	position: absolute;
	left: 100%;
	top: 0;
	z-index: 9999999;
}
.dropDownMenu > li > ul > li:hover > ul {
	display: block;
}
.dropDownMenu ul ul li {}
.dropDownMenu ul ul li a {}
.dropDownMenu ul ul li a:hover {}

This third menu will have a orange color. Now refresh your page. You should now have a functional drop down menu with 3 levels deep.

Drop Down Menu in HTML and CSS with 3 Levels Deep

Centering the Drop Down Menu

If you need to center the main <ul> with the same position as the other sections, you can wrap it inside a <div> that has max-width and auto left/right margins. I already did that in the tutorial, so take a look and analyze the code.

Also you can use text-align: center on the background div to center your menu exactly in the center. This is different then the method above.

Drop Down Menu with Centered Section

Drop down menu was tested with the latest browsers such as Chrome, Opera, Safari, Firefox, Internet Explorer 7 and above. No bugs were detected.

Update: If you think this tutorial is helpful, please share further and link to this page. It was a struggle to make this drop down menu working in all browsers, including Internet Explorer. In the next tutorial we will show you how to make this drop down menu responsive, so stay updated via e-mail feeds.

Live Demo

Download Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 3.40 out of 5)
Related Articles
Comments
  1. Gravatar Icon Deji:

    Hi David!

    How did you make the first level list stay inline when you didn’t use display inline?

  2. Gravatar Icon Christopher:

    May I ask if you have a fix for Internet Explorer 9 and higher up to 11? It does not work on IE9 but works fine in IE8.

  3. Gravatar Icon Jan:

    Hi. Is it possible to add scrollbar (overflow-y:auto) for second level? I did it in .dropDownMenu > li > ul part, but 3rd level is not working then. Thanks for your help.

  4. Gravatar Icon Drishya:

    Very nice. Thank you.

  5. Gravatar Icon Chris Long:

    I can’t find the follow-up on making this menu responsive. Could you post the link or give me some pointers?

    • Hello Chris,

      This tutorial doesn’t have the responsive part yet. Anyway, to do it, you will need some jQuery to show the child menus, and a little CSS to make it responsive. For example you will disable all floats and absolute positions, then you need to give 100% width to all items and hide all sub menus.

  6. Gravatar Icon Fiddin Yusfida:

    How can I make a full vertical drop down list?

    • Hello Yusfida,

      Can you please paste your code on jsFiddle or CodePen please? As it is very very long I deleted it. Please add the link in your comment so I can take a look.

  7. Gravatar Icon Zared:

    Great menu. Really appreciate you putting this up here. I was wondering how one could go about putting the menu in the center of the page. What you have is left-justified, but I’m hoping I can center it somehow without hard defining a pixel count from the side.

    • Hello Zared,

      You can do it with a simple trick by creating another div and apply text-align: center to it and take out all float: left rules and add display: inline-block instead. Check the code below or view this pen sheet. The rest is the same.

      * {
      	margin: 0;
      	padding: 0;
      }
      .menuBackground {
      	text-align: center;
      	background: #08A3DB;
      }
      .dropDownMenu {
      	display: inline-block;
      	text-align: center;
      }
      .dropDownMenu a {
      	height: 40px;
      	line-height: 40px;
      	padding: 0 20px;
      	display: inline-block;
      	font-size: 12pt;
      	text-decoration: none;
      	color: #FFFFFF;
      	background: #08A3DB;
      }
      .dropDownMenu a:hover {
      	text-decoration: none;
      	background: #000000;
      }
      .dropDownMenu li {
      	display: inline-block;
      	list-style: none;
      	position: relative;
      }
      .dropDownMenu li ul {
      	width: 200px;
      	position: absolute;
      	list-style: none;
      	display: none;
      	margin: 0;
      	top: 100%;
      	left: 0;
      	z-index: 999;
      	text-align: left;
      }
  8. Gravatar Icon Jerome:

    Hello,

    How can I add an additional level? Is it also possible to bind a URL to each tab? Let’s say from Home, when I select it, it should redirect me to google.com.

    • Hello Jerome,

      To add the 4th level in your menu, simply add another <ul> with list items like you did for level 3. The styles are already done, you only need to write the CSS for link colors, something like this:

      .dropDownMenu ul ul ul li a {
      	background: #E7B400;
      }

      And to add URL to each tab, there are already links there in each href=”#” attribute, you only need to change the link with your own.

  9. Gravatar Icon Nick:

    Hi Dan,

    Thanks for a nice job. It clarified some things to me. Your code work nice in IE8 :) I hope somebody still remember what this is, and Opera 12.15 environments. The code successfully carries ~400 menu items.

    Just for fun I pinned the menu to the left-top corner of the screen by adding a piece of code:

    .dropDownMenu {  
        position: fixed; 
        top: 0; 
        left: 0;
    }

    It works fine.

  10. Gravatar Icon David:

    This is a nice little menu, one addition I would like is that when you come off the 2nd level is for that to remain a different colour to the rest of the menu so as to show a trail of where you have been and where your going, kinda like breadcrumbs. Where within the css would this be done. Thanks for the tutorial.

    • Gravatar Icon David:

      The download files are not available?

      • Hello David,

        Sorry, the download is now fixed. Thank you for telling me. And for your first question, I don’t understand at all, please be more precise.

        • Gravatar Icon David:

          Sorry for not explaining very well. I mean that as you hover over as in your example programming then go down to wordpress then across to level 3 to say hacks that programming and wordpress are still highlighted to show the path you have taken. Just to show a visible indication. Thanks

          • Gravatar Icon David:

            The other question I have is on your demo at http://html-tuts.com/demo/drop-down-menu-3-levels/ the wordpress li item has an indicator to say there is a sub menu. I am in the process of linking the menu to MySQL db to get the menu li items, I want to put an indicator from the top level to show if there is a sub menu but as the menu could change don’t want to use span tags etc hardcoded, do you know of any tutorials on how to code this?

          • I understand now. To fix that in my menu you need to add “:hover” state on <li> to point on <a>. Here is the fix hope you can understand:

            .dropDownMenu li:hover > a,
            .dropDownMenu li ul li:hover > a,
            .dropDownMenu a:hover {
            	text-decoration: none;
            	background: #000;
            }

            As for the other problem with your WordPress Menu, if you can inspect the code of your menu you will see that he is automatically giving a class “menu-item-has-children” if a menu has children (or submenu). Use that class and style it with CSS.

        • Gravatar Icon David:

          Thanks for your help. I have used your additional css, unfortunately I do not get the trail, I have tried placing it in various places within the css but still have not got the path travelled. I would be grateful if you could advise. Thanks

          • Do you have a link where I can check what you did there?

          • Gravatar Icon David:

            Hi Dan, thanks for your help with this. I now have it working, I think my browser cache may have been the issue. I now have the following css file. The only thing I have done is to break down the css you have just sent me to enable me to change colours in hover states but everything working great. Thanks again

  11. Gravatar Icon UBE:

    What a BEAUTIFUL menu. Can this menu be used for Blogger? If so, how?

    I prefer css/css3/html for websites. I’ve read that having jquery and javascript takes longer to load.

    p.s. I am a total newbie to blogger and blogging.

    Thank you for your help.

  12. Gravatar Icon juliana jones:

    Good job Dan

  13. Gravatar Icon Vasiliy:

    Yay! Very good! Thank you.

  14. Gravatar Icon George:

    Very clean & professional. Big big like for Extreme Design Studio.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


1 + = 9

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.