Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Create a cool CSS-based drop-down menu

Friday, March 20th, 2009 by Servage

cssmenuSurfing 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.

Create a cool CSS-based drop-down menu, 4.4 out of 5 based on 110 ratings
Categories: Cool stuff, Guides & Tutorials

Keywords: , , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

82 comments (leave a comment)

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

Nice ! thx!

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

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 :)

Elegant and minimalistic, I like it, thanks.

Hmm, this doesn’t work with IE8 either…

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/

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.

True, but so very sad at the same time…

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.

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

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

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

THANKS THIS WORK NICE !!!!

V.gooooooood

Thanx …………..

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

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

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

does not work with IE8

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

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

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

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.

nice guide :)

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

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

Well I actually found this fairly straight forward to use.

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.

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

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

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

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.

Very, very USEFUL!

Thanks for this. It was a great help.

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

Thank you very much! :-)

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

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

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

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.

thanks its good

hey…you’re great..cool man…

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

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

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

thanks ….was very helpful

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

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

awesome tutorial, this has helped alot , thanks for sharing

it was superb……thank u somuch….

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

at the top of the html?

;)

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.

Nice one dude, works great! thanks!

thanks for this

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

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.

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

thanks
that was a nice nab-bar

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?

thank u it was very helpful for me

I really thank for this info… its very useful

nice :)

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

Great tutorial.
Thanks.

Its very true…This is very nice site

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.

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

very simple but nice project

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

Great job. Simply create Horizantal Dropdown menu.

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

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

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

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

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

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

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

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.

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

thanks for help

i is very good

thanks for this….

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

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!

Thank u.Its Very useful 4 me.

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

Best Regards
Brajesh pathak

Leave a comment

You must be logged in to post a comment.