Create a cool CSS-based drop-down menu

cssmenu Surfing the web one finds many different solutions for drop-down menus, of which many involve or even solely depend on JavaScript. I would like to present another option which I personally find really cool because it’s easy to use and utilizes features within the HTML and CSS standards without any weird workarounds.

The example in this article will render a simple horizontal menu with submenus that are displayed when you move the mouse over the menu.

» You can see a live example here.

Let me start by introducing you to the HTML code of the menu. It is structured as nested lists so that even displaying the HTML source code without any CSS style will render it with a useful structure.

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a>
    <ul>
    <li><a href="">The Team</a></li>
    <li><a href="">History</a></li>
    <li><a href="">Vision</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
    <ul>
    <li><a href="">Cozy Couch</a></li>
    <li><a href="">Great Table</a></li>
    <li><a href="">Small Chair</a></li>
    <li><a href="">Shiny Shelf</a></li>
    <li><a href="">Invisible Nothing</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
    <ul>
    <li><a href="">Online</a></li>
    <li><a href="">Right Here</a></li>
    <li><a href="">Somewhere Else</a></li>
    </ul>
  </li>
</ul>

The next step is adding the CSS styles that will make the menu look good and provide the effect of showing/hiding the submenus. Note the “magic” that comes from using :hover.

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

That’s actually it. Now you’re up and running and can modify the CSS to fit your website’s layout.

Have fun with your new menu :-)

PS: For simplicity this tutorial was held very brief. However, there are more additions that could be made. For example adding a different style for the currently active page, or JavaScript to support more browsers like IE6 and IE8.

82 comments (leave a comment)

I was wondering how that might be done using just CSS! Thanks for posting this!! :)

by Nikita Logachev on March 20, 2009 at 11:56

Nice ! thx!

by danni on March 20, 2009 at 12:15

nice! …and cool new Online Website Builder ;) although it is only useful for beginners

by TUMY on March 20, 2009 at 19:48

Careful! This doesn’t work with IE 6 (Which still ships with Windows XP and many people unfortunately still use). IE6 doesn’t support :hover on anything except a.

There’s a workaround that doesn’t break support for other browsers…

I’ve written a tutorial for the same thing but with the IE6 workaround:
http://www.logon2.com.au/blog/archive/troubleshooting/accessible-valid-dropdown-menu-or-popup-menu-using-css-and-semantic-html/

Nice article :)

by Tim Cinel on March 21, 2009 at 08:38

Elegant and minimalistic, I like it, thanks.

by Golf Südafrika on March 21, 2009 at 15:05

Hmm, this doesn’t work with IE8 either…

Reply by Jakob Jensen (Servage) on March 22, 2009 at 09:39

Yeah, like it’s written in the article the CSS-only does not work in IE6 or IE8. There are plenty of similar articles out there which include JavaScript: For example or http://www.alistapart.com/articles/horizdropdowns/ or http://www.htmldog.com/articles/suckerfish/

by Flip van Rijn on March 22, 2009 at 09:29

Trouble is if you using something that does not work in IE.
Then you are excluding potencial customers IF you DO business.
So be safe if you do business, don’t get to fancy.
Make sure you are including even modem users.

I still get Windows 95/98/NT4/2000 in my webstats.
And IE 4, 5 and 6 also.
So be aware of that.

If it just a private blog, I keep to CSS 1 and XHTML standards as a minimum.

Reply by Jakob Jensen (Servage) on March 26, 2009 at 09:45

True, but so very sad at the same time…

by HAS on March 26, 2009 at 08:51

Nice article. It’s a shame that people still use IE at all, but the majority of people do, so you have to work with that unfortunately.

by Jared on March 26, 2009 at 12:49

it’s better to give us the possabillity to use ffmpeg for streaming audio/video

by Frans on March 31, 2009 at 21:47

Well, Internet explorer 7 was working great to me with allmost every kind of CSS, Java script etc.

Now I am using Windows 7 and the default browser is Internet Explorer 8. and this css menu thing does not work.

I must say that the new OS is working really well and with the new browser I think IE is back, this time competitive.

Chill :D

by Jonas Rasmussen on April 7, 2009 at 13:04

It is working in IE 8, however you need to get out of Quirks mode…

Just press F12 and change document mode to IE8 standards

by Niksa on April 7, 2009 at 14:39

THANKS THIS WORK NICE !!!!

by KEVIN on April 29, 2009 at 19:11

V.gooooooood

Thanx …………..

by Rose on May 3, 2009 at 17:30

I must say, I could not agree with you in 100%, but it

by unmetered hosting on May 6, 2009 at 09:49

Verry nice tut !!! thank you verry much !!!

by Axel Lemmens on June 14, 2009 at 15:13

This is a great aid but it is fiddley to sometimes operate with a laptop keyboard.

by lee on June 26, 2009 at 21:24

does not work with IE8

by paul on June 29, 2009 at 15:52

Is there a simple css style menue that doesnt have sub menues taht anyone can request?

by Holly on June 30, 2009 at 18:00

hey guys to get this code to work in IE 8 its quite simple all you have to do is change it from
this
ul li {
display: block;
position: relative;
float: left;
}

to this
ul li {
display: block;
position: inherit;
float: left;
}

hope it helps all developers and people like me the wannabe’s LoL

by jd on July 1, 2009 at 12:18

well you can also use jquery

http://jquery.com it is an amazing small library that can do stuff like this and is used on major websites

by Mike on July 9, 2009 at 13:30

Hey, the drop down menus come up fine, but I can’t rollover them at all, the sub-menu just disappears. Kinda pointless like this. is this correct? IE7.

by psycho man on August 12, 2009 at 15:24

nice guide :)

@Niksa: thank you! my css based drop-down menu works fine now in IE8 :D

by xian03 on September 6, 2009 at 00:52

Sorry I did not find this user friend or easy to use.

by lee on September 6, 2009 at 11:42

Well I actually found this fairly straight forward to use.

by Pat on September 6, 2009 at 11:44

I jus’ don’t get the people who still stick up for IE… It takes MS countless versions just to get it almost right, and now IE is “competitive?” Stink, stench, and poo.

by Leonidas on September 10, 2009 at 11:13

That’s the best and simplest menu ever! It’s dead easy to get it to work in IE’s just change the DocType to this

by Ben Evans on September 21, 2009 at 14:23

check this css menu, it works in IE and other browsers

http://www.logon2.com.au/examples/dropdown-menu/

by pappu on September 29, 2009 at 11:52

Boy, I wish all these guys who come out defending M$ and Internet Explorer would all go eat an economy size bag of spotted dicks.

by Leonidas on October 8, 2009 at 12:29

Very, very USEFUL!

by Alessandro on October 22, 2009 at 13:59

Thanks for this. It was a great help.

by Emilia on November 16, 2009 at 06:48

I would like to thank all those who featured on this site and definitely will come back to visit again

by aminos on November 19, 2009 at 23:01

Thank you very much! :-)

by Ariunsanaa Tunjin on November 25, 2009 at 08:13

Great this resolve all my problem, it’s SEO friendly too.

by Anil on January 7, 2010 at 20:36

Nice,
But i want to know one thing that if i want to display a curve corner image on hover condetion then how it will do

by Rishu on February 15, 2010 at 08:01

Great help! I will try to use it on http://www.atestatinfo.ro

by Stefan on February 19, 2010 at 21:48

Works perfectly in IE 8.0 and Firefox 3.6 without any alterations. Copied and Pasted CSS and Html into appropriate pages and Bingo…Can’t speak for I.E6 or I.E7.

by steve on March 13, 2010 at 13:44

thanks its good

by sunil on April 23, 2010 at 14:38

hey…you’re great..cool man…

by chill on May 14, 2010 at 08:55

Microsoft really sucks :(
I mean even basic Web page designs that work in EVERY OTHER web browser have problems rendering normally under IE. Wooooooo :(

by Dean on August 14, 2010 at 04:21

Do you have a facebook fan page or any other way to contact you?

Reply by Jakob Jensen (Servage) on August 31, 2010 at 14:54

Yes, search for Servage on Facebook or click the link to Facebook on our website.

by bolsas femininas on August 16, 2010 at 19:16

thanks ….was very helpful

by riya on August 30, 2010 at 06:40

thanks bro it’s very helpful and easy in css….

by vasudev sharma on September 6, 2010 at 04:40

Hi very nice i am searching for this only.. thank you so much

by Mihir on October 8, 2010 at 09:50

awesome tutorial, this has helped alot , thanks for sharing

by cheap web design on November 15, 2010 at 15:59

it was superb……thank u somuch….

by PRabhakaran on November 26, 2010 at 06:49

Does’nt work in IE8? My, did you forget to insert

at the top of the html?

;)

by Zikade on November 27, 2010 at 19:33

by free movie download on November 28, 2010 at 11:28

Nice one dude, works great! thanks!

by Francisco on December 8, 2010 at 20:29

thanks for this

by ali on December 13, 2010 at 20:55

this is so great.
thank you my friend, I cant bagin to explain to you how useful this was to me :)

by slavishazero on December 23, 2010 at 22:53

Can anybody tell me how I’d center/centre the entire menu bar? I’ve tried using tags, and margin: auto on a surrounding div, the main list, each item, almost everything.

by lazaruss on January 3, 2011 at 20:17

can i get script for that?
is this css work in ie5 or others?

by acer product review on January 8, 2011 at 06:51

thanks
that was a nice nab-bar

by A Rahman on January 13, 2011 at 11:01

I really love this menu and I am determine to use but with the majority of my client’s users still on IE I must adjust to it. The drop down menus come up fine, but I can’t rollover them at all, when the sub menu shows up and I try to pass the first item the entire sub menu disappears. Does anyone have a solution for this?

by m campos on January 16, 2011 at 18:12

thank u it was very helpful for me

by sanjay on February 10, 2011 at 06:10

I really thank for this info… its very useful

by Sharfudeen on February 28, 2011 at 12:01

nice :)

by Helsi Rosyida on March 10, 2011 at 15:45

What is the code for JavaScript to support more browsers like IE6 and IE8.

by Mary Ann Grande on March 10, 2011 at 17:48

Great tutorial.
Thanks.

by Cool Websites on March 11, 2011 at 07:00

Its very true…This is very nice site

by Actress Wallpapers on March 11, 2011 at 22:07

Many tanks Jakob! :)

A little refinement definitively need to be made,
I tried it on Safari, Opera and Firefox and
when the rollover intersect the area beneath
it become impossible to select any link :(
I solved the problem adding a z-index like that:
#navbar li:hover ul {
z-index: 3;
}
Now you should put a rollover list as long as you want
without any problems of intersection with the area below.

by Davide Ganz on March 20, 2011 at 01:20

it really nice..
it help alot and solve my problem;

by pinky on March 22, 2011 at 13:11

very simple but nice project

by shofi on April 5, 2011 at 11:46

Thanks I am searching for this kind of menu. It is very simply and easy.

by Abdul Rahim on April 26, 2011 at 04:38

Great job. Simply create Horizantal Dropdown menu.

by Pawan Veebhuthi on April 28, 2011 at 10:39

Awesome code! Was looking for this high and low.
Top

by Cool on May 5, 2011 at 17:07

I am a newbie to this level of coding so I’m completely lost. I can’t get this to work with IE8 at all, even using the workaround Holly described – replacing “position: relative” with “position”inherit”.

Here’s the page: http://lma.com/dipoa/about.htm

Have no idea what I’m doing wrong.
Help would be greatly appreciated!
Thanks in advance,
Laura

by Laura on May 26, 2011 at 01:51

Thank You !!!!!!!!!!!!

by Kuldeep Rasina on June 8, 2011 at 08:22

Thank you, struggled for awhile with this but he worked. Awesome. I’m very new at this and your detail was great.

by Dana on June 11, 2011 at 17:37

Thank you very very much dude!!
This is exactly what i was looking for!

I Love You! (Dont take this the wrong way!!)

by Yash Mathur on June 12, 2011 at 12:56

It not working on IE…What else should i do????

Reply by Jakob on June 25, 2011 at 10:12

Please note – like it’s stated in the article – that the example in the article is merely a proof of concept using web standards. It has not been optimized to compensate for the shortcomings of specific browsers.

by Rachana on June 14, 2011 at 12:02

hello
many thanks for this learning
i have a problem
how to do that for joomla and place on module

thanks for help

by mal2moh on June 23, 2011 at 15:16

i is very good

by Narendra singh on July 4, 2011 at 14:05

thanks for this….

by Nishant on July 8, 2011 at 22:15

Great . .worked for me.. was looking for this for a very long time.. thnxx

by Free Movie Download on July 18, 2011 at 03:57

i tastes nice!, for all IE users i want to advice you to switch to mozilla if you want to enjoy css and other web packages!

by oni victor on July 20, 2011 at 09:29

Thank u.Its Very useful 4 me.

by michael Raj on August 30, 2011 at 10:34

Dear sir/madam
i am ver happy for css drop down menu how to create this tutorials

Best Regards
Brajesh pathak

by Brajesh kant patha on August 30, 2011 at 11:29

Servage Magazine