How-to: DropDown CSS Menu

September 8, 2008 206 Comments →

Announcement
I will update this article. Back in the days, this worked. In 2011, there are better ways, updated languages in HTML 5 + CSS 3 and many more options. Expect an article explaining this before 20 June.

Due a large stream of requests for the horizontal, drop-down version of the Vertical CSS menu tutorial, I will write a tutorial covering all the basic points of building a horizontal drop-down CSS menu!

This CSS menu will have submenus and will use the web-techniques HTML 4, CSS. In this tutorial, we use the old fashioned hover JavaScript tool.

Structure

Before we can start building an awesome design, we need to have structure. We will use HTML for that. The structure of our menu is based on a simple un-ordered list.

HTML

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">Services</a>
<ul>
	<li><a href="#">Webdesign</a></li>
	<li><a href="#">Development</a></li>
	<li><a href="#">Illustration</a></li>
	<li><a href="#">Search engine</a></li>
	<li><a href="#">WordPress</a></li>
</ul>
</li>
	<li><a href="#">Blog</a>
<ul>
	<li><a href="#">Themes</a></li>
	<li><a href="#">Plugins</a></li>
</ul>
</li>
	<li><a href="#">Contact</a></li>
</ul>

The ul element is the begin and end of the un-ordered list, and the li elements are the menu-items In some of the li elements, you see another un-ordered list and these will be our drop-down submenu’s.

Make the menu Accessible

Accessibility is important. Not everyone is on the same computer with that same settings as you. Maybe they’ve disabled CSS, or any other thing that makes this menu not work.

We will add some titles to our menu items, so that when people roll over an item or visit the menu in a screenreader, they see the title popping up telling them what that item is about. Here is our more accessible structure.

HTML

<ul id="nav">
	<li><a title="Home" href="#">Home</a></li>
	<li><a title="Services" href="#">Services</a>
<ul>
	<li><a title="Services &gt; Webdesign" href="#">Webdesign</a></li>
	<li><a title="Services &gt; Developement" href="#">Development</a></li>
	<li><a title="Services &gt; Illustration" href="#">Illustration</a></li>
	<li><a title="Services &gt; Search Engine" href="#">Search engine</a></li>
	<li><a title="Services &gt; WordPress" href="#">WordPress</a></li>
</ul>
</li><!-- end ul li -->
	<li><a title="Blog" href="#">Blog</a>
<ul>
	<li><a title="Blog &gt; Themes" href="#">Themes</a></li>
	<li><a title="Blog &gt; Plugins" href="#">Plugins</a></li>
</ul>
</li><!-- end ul li -->
	<li><a title="Contact" href="#">Contact</a></li>
</ul>

To learn more about accessibility in a CSS menu, you should read my past tips regarding accessibility here.

This part of the menu should be clear. If not, you should consider learning the basics of HTML first, before you start on a CSS menu like this.

CSS for your menu

The style language CSS will add functionality to the menu and we will combine that later on with the bahavior file I mentioned earlier. I will start to give you the elements we need to style. If we forget one part of these, our menu might not have the functionality we require. More explanation follows below when we add the ‘core’ codes.

CSS

ul#nav {}    /* the structure of our head-menu */
li {} /* the structure of the first items */
ul#nav li a {} /* the links inside our first items */
ul#nav li a:hover {} /* the roll-over styles for the links in our first items */
ul#nav li ul {} /* first items &gt; submenu structure */
ul li  {} /* the structure of our submenu items */
li > ul {} /* extra styles for Internet Explorer (behavior file) */
li:hover ul, li.over ul {} /* to make things work in Internet Explorer (call for the behavior file) */

Stripped Version

The codes that I will provide below are really necessary for the menu, it is the core of our menu. Delete any of these codes and your menu might not work. Here’s the demo; Stripped Version.

CSS

ul#nav {
list-style: none;
padding: 0;
margin: 0;
}

Everything clear here. List-style should be none if you would like to have no bullets or arrows in front of every item on the list. Padding and margin to zero: we can change that later and now we have full control of spacing.

CSS

li {
float: left;
position: relative;
width: 100px;
}

Next in line are the list items. Float all our items to the left, position set to relative to make sure the submenu is displayed relatively to the first items.

CSS

ul#nav li a {
display: block;
}

A user should be able to click on the whole menu item in order to get to the source. Therefore we need to transform the click-able area of the link the same width/height as the item itself. We do that with display:block;.

CSS

li ul {
display: none;
position: absolute;
width:100px;
top: 0;
left: 0;
margin-left:-1px;
}

Display:none; for the submenu because the submenu shouldn’t display when we aren’t hovering the menu item. The submenu is positioned absolute, 0 pixels from the top, 0 pixels from the left and therefore he’s aligned just below our first-level menu.

CSS

li>ul {
top: auto;
left: auto;
}

To reset the top and left attributes used in the ul#nav li ul{} we use this set of codes. It’s Internet Explorer causing the problem here. In li ul we have set those attributes to zero, but Firefox and other modern browsers need auto to do the job.

CSS

li:hover ul, li.over ul {
display: block;
}

This is the part where the behavior file comes in. When we hover with our mouse over the first-level menu items, the display:block; makes sure the second-level menu pops up.

Next we will go through the behavior part.

Behavior file to add li:hover support

In the modern browsers, we simply add a :hover pseudo selector to a li element because that is supported. Unfortunately, we still have Internet Explorer 6 around and that’s a problem. IE6 doesn’t support :hover selectors on anything other then links. I have found a trick to add the extra functionality.

The work-around is a behavior file called “whatever:hover”. More information about the “whatever:hover” file can be found on the author’s website and you should have the actual file on your disk and in the same directory with your CSS file.

We can add this behavior file to our CSS with the following codes:

CSS

body {   behavior:url(csshover.htc); }

Current Item

Here is a little extra that might tweak up your CSS menu.

Sometimes it is a nice add-on to a CSS menu to change the style of one item a bit when you are on that source. For example, if you are on the Homepage, the Homepage menu item has a little difference in style and when we are on a Services page, it has a little difference in style. You get the point?

We do this by adding a new class to a menu item. When we want to style our Homepage item differently, here’s how we do that.

Change:

<li><a href="" title="Homepage">Homepage</a></li>

To:

<li class="current"><a href="" title="Homepage">Homepage</a></li>

With the CSS:

ul#nav li.current{  /* your styles */ }

Why don’t we just style the class .current?

Because the CSS specificity of the normal list item (ul#nav li ) rules over .current and your ‘current’ item will not change. ul#nav li.current on the other hand will work. CSS specificity is one of the most hard parts of CSS and you can read a detailed article regarding CSS specificity here.

Time to hop in

We have worked our way into a horizontal CSS menu that works in both Internet Explorer 6, Firefox and all other modern browsers. It’s time to let your fantasy go and create a beautiful drop-down CSS menu yourself!

Today any good website builder should allow you to create an amazing drop-down CSS menu, it’s jut a matter of understanding the tools you have to work with.

Download & Demo

Of course, I couldn’t resist and gave it a shot as well and put it in the download too. You should visit the demos and download the sources. Enjoy!

DEMO: Stripped Version
DEMO: My Version
DOWNLOAD: horizontal-css-menu.rar

Custom Greeting Cards Printing Online at PsPrint.com

Information about the Author:

Name: Stefan Vervoort

URL: http://twitter.com/divitodesign

Description enjoy design, write articles, like typography, love football, keep chilling.

206 Comments

susan blair says:
November 5, 2008 at 6:08 pm
Great tutorial. I have been using DHTML on one of sites for a while now and it was a pain to implement. I just tried your tip and it was a breeze. thanks
Reply
Light Fixtures says:
November 5, 2008 at 9:00 pm
Thanks for the help, im going to update my website. It will be used on my Home Lighting website.
~Jeff
Reply
Tom says:
November 6, 2008 at 6:27 am
Thanks a lot for the tutorial, it’s bookmarked for future use when a non javascript solution is needed.
Reply
bobl says:
November 8, 2008 at 8:07 pm
Thanks for posting this… really helped
Reply
Web Design Liverpool says:
November 11, 2008 at 1:04 pm
Thanks a million for this article, been looking for a solution to a problem i had with a drop and seems i have found it here! Keep up the good work !
Reply
Web Design Liverpool says:
November 11, 2008 at 1:06 pm
As i commented on the other drop down article, thanks alot this has helped me solve a few problems ive been having!
Reply
gwan says:
November 15, 2008 at 9:22 am
Good tutorial, a great and simple way to get a crossbrowser drop down menu working.
I am not so good at javascript, i had someone else do a drop down menu for me for a joomla site. Sadly it does not work in IE6 and that person has disappeared.
I was searching for a crossbrowser menu and landed on your page.
There are certain issues with my menu that is why I cannot use your menu as it does not address those issues. So I wanted to know if this was possible in your menu.
The top level has nine menus of different lengths for e.g.
Home About-Us Milestones Customer-experience Community-Initiatives Community-Health-Care Careers Contact Us
I have only a fixed width for the page that is 988px.
The biggest problem I face is that if I make the li a fixed size then the menu will overflow outside the page(or drop down to the next line).
I cannot use 100% width with padding as that will make the smaller menu small and that will make the menu smaller than the width of the age leaving a lot of space to right. The design looks good when the menu is evenly spread out.
So how can I achieve this in your menu(that work is IE6 too).
I had played around a lot with the css and finally managed to get it right in firefox and IE7, by giving the dropdown width 100% in firefox and adding a conditional comment for IE with width of the drop down list to auto.
This make the entire drop down width as large are the large menu item(there are large and smaller item in the sub menu too).
I hope I havent confused you.
Any idea how this can be achieved. Thank you
Reply
Web Design for work - Gaming Gutter says:
November 16, 2008 at 7:34 pm
[...] creative enough to think of how to do it or something. css drop down menu – Google Search -> How-to: DropDown CSS Menu DivitoDesign It’s pretty easy. __________________ proxy sites | proxy | web proxy | glype proxy GAIA FLP [...]
Reply
Jennifer says:
December 3, 2008 at 7:46 pm
just wondering how to make a sub menu from the submenu. for example, can you create another menu off the Webdesign dropdown?
like Services
Webdesign
Basic
Pro
Basic and Pro being the sub sub categories that would be linked to something?
thanks!
Reply
Thomas says:
December 5, 2008 at 1:11 am
Great blog, thank you! This tutorial made my blogsite so much more accessible to my fellow bloggers.
Another thing i love and found extremely accessible are the used cars in riverside county.
Reply
Web Forums says:
December 6, 2008 at 7:30 pm
Thanks, this was very useful for me
Reply
mingming says:
December 9, 2008 at 5:29 am
Thanks for the post , it helps me alot
Reply
Mike from Cincinnati Ohio says:
December 11, 2008 at 3:50 pm
This is a great example for dropdowns.
I am building a website that will rebuild the sites menu each time the page is loaded from a database. This example is very helpful towards that. Thank you for the example. The vertical menu is kick butt too!
Reply
Telepresence says:
December 13, 2008 at 7:59 am
Thanks for the useful information. It helps alot to fix my errors in the css sheet..
Reply
osCommerce Templates says:
December 15, 2008 at 9:01 am
Hi Stefan,
You are rocking on CSS.
I was under impression than drop down is not possible without JavaScript but you made it by just CSS. Also Special Thanks for you explanation about how it is working.
Thanks a Lot!!
Reply
Pittsburgh Medical Malpractice lawyers says:
December 15, 2008 at 3:18 pm
Thanks a lot for the useful information, i learned quite a lot about css
Reply
Job in Bali says:
December 16, 2008 at 6:57 am
Mr Stefan
That was a Awesome tutorial! very detail and useful for me. But it cannot show up in my Opera browser… maybe i forgot to end the line…. but thanks anyway!!!
Reply
Web Design says:
December 16, 2008 at 2:08 pm
This article helped me a lot with a project I’m working on. The menu isn’t exactly what I was looking for. I wanted something vertical. Anyway I managed to change it but then I noticed it wasn’t working in IE 8. I was like wtf??? Then I realized the original menu has the same issued with IE 8 Damn Microsoft. They always know how to break compatibility. Anyway I think I’ll just leave the website like that for now. Nobody uses IE 8 anyway
Reply
i3l1nd3d says:
December 16, 2008 at 11:59 pm
Awesome, Ill have to try this… I did not know it was possible to have a drop-down menu without javascript.
David Leonard – Tampa Freelance Web Design
Reply
bebo whiteboard says:
December 17, 2008 at 2:05 am
thanks for this gonna try it now will report back if i get any problems
Reply
New Cars says:
December 18, 2008 at 3:55 pm
Great thanks for the information, much appreciated
Reply
James says:
December 18, 2008 at 11:55 pm
Thanks for the tutorial. I have always had difficulty dealing with css. Your explanation is very clear and simple. Simple question, does this work on every browser as i read someone saying it did not on Opera…
Reply
Mobbing says:
December 20, 2008 at 7:49 pm
very clean & nice = thx a lot
Reply
ready2spark says:
December 21, 2008 at 5:12 pm
thank you very much for the tutorial. i’ve been looking for something like this for a few days and was delighted to come across your instructions. for some reason, after using your code (with no modifications) the menu looks very stripped down (drop down floats over body text), no boxes around menu items, main menu isn’t centered. I’m just learning CSS and i’m wondering if you can help with some code to get the menu looking a bit better. any help you can provide would be appreciated.
thank you!
Reply
Tulip Whiskey Glasses says:
December 22, 2008 at 11:25 am
very good, thank you very much!
Reply
used computers says:
December 23, 2008 at 8:59 am
i was looking for this for a few days.it works like a charm. thank you!
Reply
outsource web design says:
December 23, 2008 at 9:45 am
Hey ,
i like the way you have the “html” and “css” snippets . very cool
Reply
- Stefan Vervoort says:
  December 23, 2008 at 4:07 pm
  Check http://www.frank-verhoeven.com/wordpress-plugin-fv-code-highlighter/ for more information on the Code hightlighter!
  Reply
noni wholesale says:
December 23, 2008 at 7:12 pm
Thanks for the tips man, worked beautifully. As the person above me said your code blocks are absolutely beautiful. How did you do that?
Reply
- Stefan Vervoort says:
  December 24, 2008 at 10:10 am
  You should browse to a plugin a friend on my developed. Check it out here: http://www.frank-verhoeven.com/wordpress-plugin-fv-code-highlighter/
  Reply
goji business says:
December 26, 2008 at 6:39 pm
This is really a nice tutorial for creating css menus. There are quite a few tools for eg ProjectSeven now available which automated this task.
Reply
Andrew says:
December 27, 2008 at 6:48 pm
I guess CSS isn’t as confusing as it sometime seems. Thanks!!
Reply
hider says:
December 28, 2008 at 1:20 am
Thanks for the useful post, i’ll try it on one of my sites
Reply
cuocthiseo says:
December 28, 2008 at 4:05 am
Very nice, I follow these steps and got a good looking blog now.
Thank you very much.
Reply
Chris says:
December 28, 2008 at 4:06 pm
Thanks a million I have been trying for weeks to get the same effect but had not luck. Worked like a charm.
Thanks
Reply
Recipes says:
December 28, 2008 at 4:33 pm
Thanks! I like the way you make it easy to understand!
Reply
download youtube says:
December 29, 2008 at 8:36 am
Thanks, im just starting to learn css and this was great.
Reply
Travel Turkey says:
December 29, 2008 at 11:53 am
this is a useful post, i’ll try it on my sites thank you
Reply
Travel Turkey says:
December 29, 2008 at 11:58 am
Thanks for the useful post, i’ll try it on one of my sites
Reply
Watch Entourage says:
December 29, 2008 at 8:18 pm
I was looking for this, and unlike other methods, this works !
Great post dude.. keep sharing!
cheers
Reply
Mark says:
December 30, 2008 at 9:31 am
Very, very useful information. Take a look at http://www.knrdesigns.com and I used one of your techniques.
Thanks a lot!
http://www.knrdesigns.com
Reply
Dan says:
December 31, 2008 at 2:35 am
I just used for a drop down menu on my site http://teenjobscene.com
Reply