Two Level Horizontal Dropdown Menu using CSS and HTML

This article will continue from where I left of with Pure CSS Horizontal Menu. A lot of websites having a menu such as the one we built in the previous article, however for some sites, there is a need for a second level of navigation. In this article I will create a horizontal drop down menu using cascading style sheets (CSS) and semantically coded HyperText Markup Language (HTML).

This is how the two level dropdown will look like at the end of the article.

Image: Two Level Horizontal Menus

I will use the code from the first article (Pure CSS Horizontal Menu);Download Source Code, however menu looks very simple so first I will make some changes so that looks more professional.

First, I will add a DOCTYPE at the beginning of the document. This is very important in order to achieve cross-browser compatibility. In the later part of the article I will show why it is important.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">

Now, I will add some attractive background to the navigation. With the use of Photoshop I made a mock up which looks like above. I am assuming you are familiar with basic Photoshop and know how to slice and use as background. I sliced nav-bg.gif which is of 1px X 52px and repeated in the horizontal (X axis) direction in the css.

#navigation{ background:url('images/nav-bg.gif') repeat-x; width:600px; height:52px; }

As you can see from the above code, set a background image which is repeating in the X-axis, also adjusted the height to 52px to match the image height and mentioned a width of the navigation container.

Currently, link works only when you mouse over on the text, so I decided link to be work more like a button; means when you mouse over in and around the text and will work as a link.

#navigation li a{ display:block ; line-height:3.2em; color:#fff; text-decoration: none; }

#navigation ul{ margin:0; padding: 0;}

To get this done, use display: block; which treats the link as block, adjust the line-height to align the text to the middle. Also, remove the top padding of <ul> elements of navigation.

Let’s add the border for each navigation <li> item.

#navigation ul li{ background: url('images/devider.gif') no-repeat top right; display:inline; height: 52px; list-style:
none; float:left; margin: 0 30px;}

Here is the navigation looks like now.

Border seems to be too close to the text. Let’s have some more modifications.

#navigation li a{ display:block ; line-height:3.2em; color:#fff; text-decoration: none;  padding: 0px 30px}

Add some padding (padding: 0px 30px;) to left and right to the link. And remove the margin for link items (#navigation ul li).

Let’s refresh and we’re almost there, the last item of the link has the border; which seems to be unwanted. So let’s remove it.

We’re going to assign a class to last item of the navigation and will set the background to none in the css (by default it was taking the border image set to li items, here we’re overwriting rules)

#navigation ul li.last{ background: none;}

Here is our professional looking main navigation

Before we proceed further to create the dropdown for the submenu, here is the latest updated code for the main navigation.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS Horizontal Menu</title>
<style>
#navigation{ background:url('images/nav-bg.gif') repeat-x; width:600px; height:52px; font-family: arial; }
#navigation ul{ margin:0; padding: 0;}
#navigation ul li{ background: url('images/devider.gif') no-repeat top right; display:inline; height: 52px; list-style:none; float:left; }
	#navigation ul li.last{ background: none;}
#navigation li a{ color:#ccc; text-decoration: none; line-height:3.2em; display:block; padding:0px 30px; }
#navigation li a:hover{ color:#fff;}
</style>
</head>
<body>
<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Clients</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
    </ul>
</div>
</body>
</html>

Let’s proceed to create dropdown menu.

<div id="navigation">
     <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">About Us</a>
                <ul>
	           <li><a href="#">Sub Link</a></li>
	           <li><a href="#">Sub Link</a></li>
	           <li><a href="#">Sub Link</a></li>
	   </ul>
	</li>
             <li><a href="#">Services</a>
	    <ul>
		<li><a href="#">Sub Link</a></li>
		<li><a href="#">Sub Link</a></li>
		<li><a href="#">Sub Link</a></li>
		<li><a href="#">Sub Link</a></li>
	     </ul>
	</li>
             <li><a href="#">Clients</a></li>
             <li class="last"><a href="#">Contact Us</a></li>
     </ul>
</div>

Make your code looks like above. Basically sub menu items also are done using unordered list items. So first create list items of sub menu then nested the submenu items within a main menu list item.

           <li><a href="#">About Us</a>
                <ul>
	           <li><a href="#">Sub Link</a></li>
	           <li><a href="#">Sub Link</a></li>
	           <li><a href="#">Sub Link</a></li>
	        </ul>
	  </li>

Refresh the page, you’ll find it messed up a bit. Don’t worry we will fix it using CSS.

Let’s add some style rules to list items which are nested within another list item. So we need to write rules pointing to the right list items ie #navigation -> ul -> li -> ul -> li

#navigation ul li ul li{ display: block; background:#4D4D4D;}

Sets a rule how nested items should be displayed and the background.

Let’s add the rule to #navigation ul li ul li which do the TRICK so that list items of sub menu appear as vertical lists.

#navigation ul li ul li{ display: block; background:#4D4D4D; float:none}

Rule “float: none” to #navigation ul li ul li resets the rule which was set earlier i.e. “float:left” to #navigation ul li items of the document which had cascading effect to the nested items as well.

Now, beautify a little bit adding some border to the nested item #navigation ul li ul li.

#navigation ul li ul li{ display: block; background:#4D4D4D; float:none; border-top:1px solid #373737;}

At this moment our two level dropdown menu looks like this.

Now what we see is submenu looks okay and matched with the main navigation. (Do not worry, submenu of both about us and services looks together but they are not) Now we need to hide submenu at the initial stage.

To get that done, lets add the below rule to CSS.

#navigation li ul{ display:none;}

The above rule sets the “unordered lists” under a list item will not be displayed at initial stage.

Let’s refresh and see the effect. Woohoo! Yes, submenu is not there any more. Wait, let’s mouseover the link item which has submenu such as “about us” or “services”. Where is the submenu? We need to see the submenu while mouse over the item. Isn’t it?

So, one last rule you’ll have to add to the CSS.

#navigation ul li:hover ul, #navigation ul li:focus ul{ position:relative; display:block;}

Now, refresh the page. Bingo! Here we have our 2 level dropdown menu ready to use.

As I said earlier, importance of having DOCTYPE at the beginning of a html document, let’s do a test.

Remove the DOCTYPE and refresh the page and check it across different browsers & versions; importantly check with IE browsers. Dropdown may not work if there is DOCTYPE.

It’s always recommended to use a DOCTYPE for an HTML document.

Note: I also could have set the rule to hide submenu “#navigation li ul{ display:none;}” before set the design rules for the submenu items but it would have made the submenu items hidden thus making a bit difficult to design the submenu items.

Two Level Horizontal Dropdown Menu successfully tested on Mozilla Firefox , IE 7/8/9, Chrome, Safari, Opera. However, this menu has limitations on IE6 and I will be posting another article to show fixes to make this menu works on IE6.

11 Responses so far.

babu says:

March 31, 2011 at 4:49 am

i will check ie 7 and 8 but didn’t not working drop down menu.
john doe says:

April 6, 2011 at 5:23 am

hi there i’ve tried this and works really fine, until you put more text than “sub link” i mean bigger text than the box try: “i’ve put this to try the sub link”, then it will display something really bad, can you tell me a tip to fix it? thank you
anonymous says:

April 30, 2011 at 9:06 am

Any updates on IE6 fixes?
Adesh says:

May 20, 2011 at 7:10 am

hii i got the required output with the help of this
thankyou for posting this important information,
Veronica says:

June 28, 2011 at 2:22 pm

I was able to make the drop down menu. Thank you so much for explaining so well each step of the way.
iugod says:

August 6, 2011 at 3:30 am

I haven’t been online for a while to look into IE6 fixes. However, just to mention IE6 is now quite a old browser and I feel we should be looking at the modern browsers.
Anto says:

August 25, 2011 at 11:22 pm

Thanks for this poster, works perfectly well on all ‘Modern Day Browsers’

Forget fixing it for IE6, Me and my company don’t even open the site in IE6 anymore to test, and make our clients fully aware that this is this case.

IE6 is a TEN year old browser, and there has been 3 FULL releases of IE so clients should really be upgrading, there is no excuse not to! I believe many companies also have taken this approach.

http://news.bbc.co.uk/1/hi/8488751.stm

http://www.businessinsider.com/microsoft-launches-anti-marketing-campaign-for-ie6-2011-3
Ebby says:

September 1, 2011 at 6:03 am

Good Day.
Thank you for the excellent navigation menu tutorial.
Unfortunately, the drop-down menu does not work in IE8. Do you have a fix for this?
Thank you,
ebby.
pravin says:

September 21, 2011 at 12:32 pm

Works in ie

Untitled Document

#navigation{ background: url(‘images/menubg1.png’) repeat-x; float:left; height:47px; margin:0 0 0 48px; width:888px; }
#navigation ul{ margin:0; padding: 0;}
#navigation ul li{ background: url(‘images/menu-divider.png’) no-repeat center right; display:inline; height:47px; list-style:none; float:left;}

#navigation li a{ color:#000000; text-decoration: none; line-height:47px; display:block; font-family:rockwell; font-size:14px; padding:0px 30px; }
#navigation li a:hover{ color:#FFFFFF; background-image:url(images/menu-hover.png); background-repeat:repeat-x;}
#navigation ul li ul li{ display: block; background:#FFFFFF;}
#navigation ul li ul li{ display: block; background:#027292; float:none}
#navigation ul li ul li{ display: block; background:#027292; float:none; border-top:1px solid #373737;}
#navigation li ul{ display:none;}
#navigation ul li:hover ul, #navigation ul li:focus ul{ position:relative; display:block;}
#navigation li a.leftround{background-image:url(images/first-rounded.jpg); background-repeat:no-repeat;}
#navigation li a.leftround:hover{background-image:url(images/first-rounded-blue.jpg); background-repeat:no-repeat; background-color:#1086a9;}
#navigation li a.rightround{background-image:url(images/last-rounded.jpg); background-repeat:no-repeat; background-position:right;}
#navigation li a.rightround:hover{background-image:url(images/last-rounded-blue.jpg); background-repeat:no-repeat; background-color:#1086a9;}

Home
About Us

Sub Link
Sub Link
Sub Link

Services
portfolio
Testimonials
Request for Quote
Contact Us
Karen says:

October 2, 2011 at 12:41 pm

I tried this both with and without doctype and I can’t get the drop downs to appear in IE8? any suggestions?
Thanks so much!
Iain Mars says:

December 6, 2011 at 9:26 am

Well this is just excellent! Thank you so much for sharing this with us.