How-to: DropDown CSS Menu
Author: Stefan Vervoort | Please Comment!
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, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6+. By the end of this tutorial, you will be able to make this example CSS menu.
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 > Webdesign" href="#">Webdesign</a></li> <li><a title="Services > Developement" href="#">Development</a></li> <li><a title="Services > Illustration" href="#">Illustration</a></li> <li><a title="Services > Search Engine" href="#">Search engine</a></li> <li><a title="Services > Wordpress" href="#">Wordpress</a></li> </ul> </li> <li><a title="Blog" href="#">Blog</a> <ul> <li><a title="Blog > Themes" href="#">Themes</a></li> <li><a title="Blog > Plugins" href="#">Plugins</a></li> </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 > 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!
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
Loading ...
Loading...
7:48 pm on September 8th, 2008
Great tutorial, thank you!
I was wondering if it’s possible to add a second level of subnav using this method. Like, in your example, having another sub list appear when hovering over “Search engine” under “Services.” If it’s possible, how would you approach it?
Again, thanks for the tut!
8:22 pm on September 8th, 2008
Thank you, great tutorial. What really would hit the spot is creating this compatible for wordpress categories. Good luck.
8:29 pm on September 8th, 2008
Good evening, Keith & Sander!
@Keith - I think it’s possible, just have to think about that in a bit. I will add extend this one in the future. Thanks for your nice comment
@Sander - Will be adding one in a short time. Thanks for the visit and comment.
10:35 pm on September 8th, 2008
Doesn’t work in ie 6, you need to use suckerfish to do so
8:37 am on September 9th, 2008
@Andrew - This menu does work in IE6, I checked it
Edit - Strange, strange. I have checked it when I was building it Offline and it worked fine. When uploaded however, it doesn’t. I have to look for the problem.
10:51 pm on September 9th, 2008
Looks pretty well, but this can but done a lot more fancy nowadays… you might wanne use a framework like jQuery to make things look much smoother…
In my opinion the csshover.htc method is a bit outdated…
8:55 pm on September 10th, 2008
Thanks for the CSS tip. Now here’s a tip to motivate your readers. I implemented drop down menus in all my sites in early July. I immediately noticed a 30% increase in page views. My theory? I think it’s the 2 click theory to get to content. The less clicks required, the more likely a person is going to spend viewing content. Even in this world of high speed modems, readers are still lazy just to even click 3x and when you reduce it to 2x it makes it more convent for the visitor. JMHO.
10:28 pm on September 11th, 2008
very complete tutorial. I like your style too. DOWNLOADED !!
4:16 am on September 13th, 2008
Thanks for share ! Great Tutorial
8:21 am on September 13th, 2008
@SantosWebdesign - That is true for a bit. But because I can’t do anything with jQuery yet (and many people with me), I decided to go this way.
@Chrome - Great that tip worked for you, and I think it should for me as well!
@ Dr Emi & Danh - Thanks for your comments guys!
I will expand this tutorial with a second submenu in the near future.
1:30 pm on September 25th, 2008
I finally got the submenus to appear under the main menu but they hover right over the main menu item! How do I fix that?
Thanks!
3:02 pm on September 25th, 2008
@Jennifer - Add something like this:
That should work, if not, let me know!
12:21 pm on September 26th, 2008
Thanx for teaching me how to drop down css menus!
7:24 pm on September 26th, 2008
I changed the 0 to AUTO and it worked fine! thanks thought. Off topic but I’ve added my blog archive and the same thing is happening. Like the block is not big enough and all the months are on top of each other. Any ideas?
6:55 pm on September 29th, 2008
I can’t get my dropdowns to work when i upload it either. Any idea why?
2:30 pm on October 9th, 2008
@Denialle - No, I don’t. Can’t seems to find the problem..
2:06 pm on October 14th, 2008
Hi, Great tutorial. You have a mistake however in one of your code boxes.
In the first CSS box you have:
ul li } /* the structure of our submenu items */
but later on you have it as
li ul.
Just thought I’d point that out.
9:03 pm on October 14th, 2008
Thanks - this was very helpfull. As a Very Very Novice, I wanted to center the entire menu on the page instead of left justified - but couldn’t find it.
It’s probably very simple - thanks again!
2:55 pm on October 15th, 2008
Also - how would you add a third level?
4:29 pm on October 22nd, 2008
Good work: expecially now when I’m trying to understand why MSIE8 Beta 2 does not work as expected…
Yeah, I know it’s a beta, extremely buggy, etc. etc.
But I had troubles with other Authors, when they used visibility:hidden and visibility:visible apparently not working in this case with MSIE8! Great the use of display:none display:block instead as you suggest.
But I have still a trouble (and you have also!): when the block is displayed going hover with the mouse, the menu window is not refreshed. In your css the link last visited in a previous try, displays no text.
I would like to solve this problem, but unfortunately I’ve not enough expertise.
5:12 am on October 23rd, 2008
Hi, great blog by the way, if you want to see a prime example of the diversity of css dropdowns visit http://www.edock.tv they use one for the menus. If any bodies struggling with them then google css generator where you will find “css generators”. This way you can play about with the coding!
very cool stuff!
5:41 am on October 26th, 2008
A good tut (though I generally do not like to use dropdowns).
Um….is those little bullets near the links necessary? And just a suggestion: you could have added a subtle gradient for the links in hover state or otherwise.
5:15 pm on November 3rd, 2008
I learned a lot from this article, thank you so much.
9:49 pm on November 3rd, 2008
Hey, Thanks for the tutorial. Now it makes so much sense and can finally edit those free wordpress themes to have a dropdown menu. Thank you.
10:44 pm on November 3rd, 2008
Awesome article! I’m in process of learning CSS. This article is really helpfull, but maybe a little too advanced for me at this point. I tend jumping too the hard things first:(
Maybe some of you have a couple of good links for me as a newbie to CSS?
Kindly regards
Retry
10:51 pm on November 3rd, 2008
It took me a lot of time to understand the instruction. Thank you Stefan for the long long guide. I will recommend this site to my other friends..
12:46 am on November 4th, 2008
Thanks been looking for this for my site http://www.bonusbeast.com
4:39 am on November 4th, 2008
Thanks for this great help tutorial!
5:16 am on November 4th, 2008
Great tutorial, may come in handy!!
9:08 am on November 4th, 2008
I’ve been searching around for similar tutorial as this one, glad you have posted it here. Need to learn it first.
2:08 pm on November 4th, 2008
Sounds great. will try it out (or if fails another possibility (claims no behaviours needed) at http://www.cssplay.co.uk/menus/dd_valid.html)
Great site. Hope you win the competition.
4:26 pm on November 4th, 2008
Very useful tutorial. Thanks man..
6:52 pm on November 4th, 2008
Thanks for the tutorial, I was trying to figure this out on my own. This is great!
11:18 pm on November 4th, 2008
This was a very well laid out tutorial, have been looking for one like this.. great work and thanks !
1:25 am on November 5th, 2008
Useful tutorial.Thanks for the information.
2:23 am on November 5th, 2008
Ahhh thank you for posting this. I’ve become a big fan of “pure CSS” recently…clean HTML code that actually works in old-school browsers (can you say lynx? Heh.) But I think the overall experience on the web is going to be improved when more sites switch over to a pure CSS model. And snazzy menus like this certainly help. Thanks again for posting! –Noah
2:31 am on November 5th, 2008
for someone who is not too experienced in coding, are there any courses or training you recommend
6:08 pm on November 5th, 2008
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
9:00 pm on November 5th, 2008
Thanks for the help, im going to update my website. It will be used on my Home Lighting website.
~Jeff
6:27 am on November 6th, 2008
Thanks a lot for the tutorial, it’s bookmarked for future use when a non javascript solution is needed.
8:07 pm on November 8th, 2008
Thanks for posting this… really helped
1:04 pm on November 11th, 2008
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 !
1:06 pm on November 11th, 2008
As i commented on the other drop down article, thanks alot this has helped me solve a few problems ive been having!
9:22 am on November 15th, 2008
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
7:46 pm on December 3rd, 2008
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!
1:11 am on December 5th, 2008
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.
7:30 pm on December 6th, 2008
Thanks, this was very useful for me
5:29 am on December 9th, 2008
Thanks for the post , it helps me alot
3:50 pm on December 11th, 2008
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!
7:59 am on December 13th, 2008
Thanks for the useful information. It helps alot to fix my errors in the css sheet..
9:01 am on December 15th, 2008
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!!
3:18 pm on December 15th, 2008
Thanks a lot for the useful information, i learned quite a lot about css
6:57 am on December 16th, 2008
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!!!
2:08 pm on December 16th, 2008
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 
11:59 pm on December 16th, 2008
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
2:05 am on December 17th, 2008
thanks for this gonna try it now will report back if i get any problems
3:55 pm on December 18th, 2008
Great thanks for the information, much appreciated
11:55 pm on December 18th, 2008
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…
7:49 pm on December 20th, 2008
very clean & nice = thx a lot
5:12 pm on December 21st, 2008
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!
11:25 am on December 22nd, 2008
very good, thank you very much!
8:59 am on December 23rd, 2008
i was looking for this for a few days.it works like a charm. thank you!
9:45 am on December 23rd, 2008
Hey ,
i like the way you have the “html” and “css” snippets . very cool
4:07 pm on December 23rd, 2008
Check http://www.frank-verhoeven.com/wordpress-plugin-fv-code-highlighter/ for more information on the Code hightlighter!
7:12 pm on December 23rd, 2008
Thanks for the tips man, worked beautifully. As the person above me said your code blocks are absolutely beautiful. How did you do that?
10:10 am on December 24th, 2008
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/
6:39 pm on December 26th, 2008
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.
6:48 pm on December 27th, 2008
I guess CSS isn’t as confusing as it sometime seems. Thanks!!
1:20 am on December 28th, 2008
Thanks for the useful post, i’ll try it on one of my sites
4:05 am on December 28th, 2008
Very nice, I follow these steps and got a good looking blog now.
Thank you very much.
4:06 pm on December 28th, 2008
Thanks a million I have been trying for weeks to get the same effect but had not luck. Worked like a charm.
Thanks
4:33 pm on December 28th, 2008
Thanks! I like the way you make it easy to understand!
8:36 am on December 29th, 2008
Thanks, im just starting to learn css and this was great.
11:53 am on December 29th, 2008
this is a useful post, i’ll try it on my sites thank you
11:58 am on December 29th, 2008
Thanks for the useful post, i’ll try it on one of my sites
8:18 pm on December 29th, 2008
I was looking for this, and unlike other methods, this works !
Great post dude.. keep sharing!
cheers
9:31 am on December 30th, 2008
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
2:35 am on December 31st, 2008
I just used for a drop down menu on my site http://teenjobscene.com
3:19 am on December 31st, 2008
I will definitely give this a shot on some of the sites I own and run. Great article and it’s quite obvious you’ve received a lot of attention from it.
Thanks!
6:37 pm on January 1st, 2009
great telling
4:52 pm on January 2nd, 2009
Great! I love CSS only menu’s
2:19 pm on January 3rd, 2009
very interesting article well written man… http://www.consolemodz.com
9:23 pm on January 4th, 2009
good post! thank you very much
3:26 am on January 6th, 2009
Great tutorial,thank you!!!
8:55 pm on January 7th, 2009
THANK YOU!!!! I was working on a site for a friend and he wanted to do this exactly and I looked all around the web and couldn’t find anything. Finally I found what i was looking for, bookmarked, thx!
10:26 pm on January 7th, 2009
Great everybody is liking it!