Tutorials and Code

ActionScript (5)
ASP (7)
ASP.NET (28)
Assembly (1)
C (6)
C# (132)
C++ (33)
CSS (6)
General (4)
HTML (6)
Java (28)
JavaScript (38)
MySQL (2)
Objective C (1)
Pascal (1)
PHP (61)
Python (3)
Ruby (18)
Silverlight (1)
SQL (7)
VB.NET (5)
Visual Basic (3)

Syndication

My Account

Community Forums

Webmaster Tools

Tech Jobs

Geekpedia » CSS Tutorials » Horizontal Drop-Down Menu using CSS

Horizontal Drop-Down Menu using CSS

Learn how to create a drop-down horizontal CSS menu, completely JavaScript-free. The menu is valid XHTML and CSS and uses unordered lists for the menu items.

On Sunday, April 15th 2007 at 04:35 PM

By Sorin Sodolescu (View Profile)

(Rated 4.1 with 23 votes)

Contextual Ads

More CSS Resources

See this code in action

The advantage of creating menus with CSS is the fact that it's not a scripting language and, unlike JavaScript, it can not be turned off leaving your menu inaccessible.

First let's see the HTML. We'll use a DIV and some ULs to create our menu since this is not only the most appropriate method but it's also optimizes it for search engines.

<body>
<div class="menu">
   <ul class="menu">
      <li><a class="menu"href="1.html">A</a>
         <ul>
            <li><a class="menu"href="1.html">1</a>
               <ul>
                  <li><a class="menu" href="1.html">1 A</a></li>
                  <li><a class="menu" href="1.html">1 B</a></li>
                  <li><a class="menu" href="1.html">1 C</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">2</a>
               <ul>
                  <li><a class="menu" href="1.html">2 A</a></li>
                  <li><a class="menu" href="1.html">2 B</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">3</a>
               <ul>
                  <li><a class="menu" href="1.html">3 A</a></li>
                  <li><a class="menu" href="1.html">3 B</a></li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
   <ul class="menu">
      <li><a class="menu"href="1.html">B</a>
         <ul>
            <li><a class="menu"href="1.html">1</a>
               <ul>
                  <li><a class="menu" href="1.html">1 A</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">2</a>
               <ul>
                  <li><a class="menu" href="1.html">2 A</a></li>
                  <li><a class="menu" href="1.html">2 B</a></li>
                  <li><a class="menu" href="1.html">2 C</a></li>
                  <li><a class="menu" href="1.html">2 D</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">3</a>
               <ul>
                  <li><a class="menu" href="1.html">3 A</a></li>
                  <li><a class="menu" href="1.html">3 B</a></li>
               </ul>
            </li>
         </ul>
     </li>
   </ul>
   <ul class="menu">
      <li> <a class="menu"href="1.html">C</a>
         <ul>
            <li><a class="menu"href="1.html">1</a>
               <ul>
                  <li><a class="menu" href="1.html">1 A</a></li>
                  <li><a class="menu" href="1.html">1 B</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">2</a>
               <ul>
                  <li><a class="menu" href="1.html">2 A</a></li>
                  <li><a class="menu" href="1.html">2 B</a></li>
                  <li><a class="menu" href="1.html">2 C</a></li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>
<p style="margin:0px; padding:0px;font-size:60px; color:#CCCCCC; text-indent:15px; text-decoration:underline; font-style:italic">SOME SAMPLE TEXT</p>
</body>
</html>

The next step is to write the CSS. To make this work in Internet Explorer and Firefox we'll need 2 separate CSS files, one for each browser. Let's start with the file for Internet Explorer.
As you can see from the HTML, we're using the "menu" class.

First let's format the containing DIV. We'll set its width, height, position and background color.

div.menu
{
width:100%;
position:relative;
background-color:#6699CC;
height:20px;
}

The next step is to format the unordered lists. These lists are the top level of the menu, they will be visible all the time.

ul.menu
{
position:relative;
padding:0px;
margin:0px;
list-style-type:none;
color:#FF00FF;
float:left;
}

We've removed the default padding and margins of the UL and made it float left. This way all of the ULs will fit next to eachother. Up next are the second level ULs.

ul.menu ul
{
position:relative;
list-style-type:none;
margin:0px;
display:none;
background-color:#00CCFF;
}

The lists are now hidden and positioned under the first level UL. Now it's time for the third level ULs.

ul.menu ul ul
{
position:absolute;
display:none;
margin-top:0px;
margin-left:0px;
}

These ULs are also hidden, and they position is set to absolute to make them appear on top of other elements. We will make the ULs become visible and invisible with ":hover".

ul.menu:hover ul
{
display:block;
}
ul.menu:hover ul ul
{
display:none;
}
ul.menu ul li:hover ul
{
display:block;
}

This makes the second level ULs become visible when the mouse is over the first level UL, the third level ULs will remain hidded until the mouse is over the second level UL. Finally, we format the links.

a.menu
{
background-color:#6699CC;
display:block;
width:150px;
padding-left:10px;
text-decoration:none;
color:#FFFFFF;
font-family:arial;
font-size:16px;
border-bottom: solid 1px black;
border-right: solid 1px #000099;
margin-bottom:-1px
}
a.menu:hover
{
background-color:#006699;
color:#66FFFF;
}

The CSS file for IE is done. The file for FF is almost the same except the second and third level ULs.

ul.menu ul
{
position:absolute;
list-style-type:none;
margin:0px;
display:none;
margin-left:-40px;
z-index:1;
}

We've set the position of the second level ULs to absolute, because otherwise it won't apear on top of other elements (like it does in IE). Also, the ULs have z-index:1 to appear on top if the third level ULs. The left margin is set to -40px to position it under the first level UL.

ul.menu ul ul
{
position:absolute;
display:none;
margin-top:-20px;
margin-left:121px;
z-index:-1;
}

The third level ULs have z-index:-1 to appear under the second level ULs, and have negative margins in order for them to be aligned corectlly with the rest of the level.
In the html file we set the Non-IE file as default stylesheet and use a conditional comment to make the IE file load if the page is viewed with that browser.

Here is the entire code for the CSS drop-down menu:

<!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=iso-8859-1" />
<link rel="stylesheet" href="NonIEcssMenu.css" />

<title>CSS Menu</title>
</head>
<body>
<div class="menu">
<ul class="menu">
   <li><a class="menu"href="1.html">A</a>
      <ul>
         <li><a class="menu"href="1.html">1</a>
            <ul>
               <li><a class="menu" href="1.html">1 A</a></li>
               <li><a class="menu" href="1.html">1 B</a></li>
               <li><a class="menu" href="1.html">1 C</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">2</a>
            <ul>
               <li><a class="menu" href="1.html">2 A</a></li>
               <li><a class="menu" href="1.html">2 B</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">3</a>
            <ul>
               <li><a class="menu" href="1.html">3 A</a></li>
               <li><a class="menu" href="1.html">3 B</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li><a class="menu"href="1.html">B</a>
      <ul>
         <li><a class="menu"href="1.html">1</a>
            <ul>
               <li><a class="menu" href="1.html">1 A</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">2</a>
            <ul>
               <li><a class="menu" href="1.html">2 A</a></li>
               <li><a class="menu" href="1.html">2 B</a></li>
               <li><a class="menu" href="1.html">2 C</a></li>
               <li><a class="menu" href="1.html">2 D</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">3</a>
            <ul>
               <li><a class="menu" href="1.html">3 A</a></li>
               <li><a class="menu" href="1.html">3 B</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li> <a class="menu"href="1.html">C</a>
      <ul>
         <li><a class="menu"href="1.html">1</a>
            <ul>
               <li><a class="menu" href="1.html">1 A</a></li>
               <li><a class="menu" href="1.html">1 B</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">2</a>
            <ul>
               <li><a class="menu" href="1.html">2 A</a></li>
               <li><a class="menu" href="1.html">2 B</a></li>
               <li><a class="menu" href="1.html">2 C</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>
<p style="margin:0px; padding:0px;font-size:60px; color:#CCCCCC; text-indent:15px; text-decoration:underline; font-style:italic">SOME SAMPLE TEXT</p>
</body>
</html>

/* NonIEcssMenu.css */

div.menu{
width:100%;
position:relative;
background-color:#6699CC;
height:20px;
}
ul.menu{
position:relative;
padding:0px;
margin:0px;
list-style-type:none;
color:#FF00FF;
float:left;
}
ul.menu ul{
position:absolute;
list-style-type:none;
margin:0px;
display:none;
margin-left:-40px;
z-index:1;
}
ul.menu ul ul{
position:absolute;
display:none;
margin-top:-20px;
margin-left:121px;
z-index:-1;
}
ul.menu:hover ul
{
display:block;
}
ul.menu:hover ul ul
{
display:none;
}
ul.menu ul li:hover ul
{
display:block;
}
a.menu
{
background-color:#6699CC;
display:block;
width:150px;
padding-left:10px;
text-decoration:none;
color:#FFFFFF;
font-family:arial;
font-size:16px;
border-bottom: solid 1px black;
border-right: solid 1px #000099;
}
a.menu:hover
{
background-color:#006699;
color:#66FFFF;
}

/* IEcssMenu.css */

div.menu
{
width:100%;
position:relative;
background-color:#6699CC;
height:20px;
}
ul.menu
{
position:relative;
padding:0px;
margin:0px;
list-style-type:none;
color:#FF00FF;
float:left;
}
ul.menu ul
{
position:relative;
list-style-type:none;
margin:0px;
display:none;
background-color:#00CCFF;
}
ul.menu ul ul
{
position:absolute;
display:none;
margin-top:0px;
margin-left:0px;
}
ul.menu:hover ul
{
display:block;
}
ul.menu:hover ul ul
{
display:none;
}
ul.menu ul li:hover ul
{
display:block;
}
a.menu
{
background-color:#6699CC;
display:block;
width:150px;
padding-left:10px;
text-decoration:none;
color:#FFFFFF;
font-family:arial;
font-size:16px;
border-bottom: solid 1px black;
border-right: solid 1px #000099;
margin-bottom:-1px
}
a.menu:hover
{
background-color:#006699;
color:#66FFFF;
}

Digg It!

Del.icio.us Reddit

StumbleIt

Newsvine

Furl

BlinkList

Rate this tutorial

Current Comments

by Matt on Saturday, May 12th 2007 at 10:08 PM

cool... too bad it doesnt work in IE 6

by Jenny on Tuesday, September 25th 2007 at 02:44 PM

Matt is right.. this code doesn't work in IE so it's useless.

by Sorin Sodolescu on Tuesday, September 25th 2007 at 02:53 PM

This code doesn't work in IE 6, because IE 6 doesn't render things the way they're intended. For example the min-height attribute doesn't work at all in IE6. You should give a modern browser a try, and you'll see that this code works just fine in IE 7, Firefox 2, Safari 3 or Opera 9. So it's pretty useful with a modern browser.

by Will on Saturday, September 29th 2007 at 10:13 AM

Useless maybe a a rather strong term to define this...however these guys have a point. The thing is to suggest that we try a modern browser is ridiculous....or do you suggest this to every user of your sites?

by Sorin Sodolescu on Saturday, September 29th 2007 at 01:38 PM

Hi Will. No, I can't force people to use what browser I want (and don't want to). I'm just saying that this code was intended to work on modern browsers; also using a .htc file this code can work on IE6 too. But I do think that if a script doesn't work on an older and flawed browser but works on modern ones, it can't be called useless. If you try running an application developed in .net on a computer that doesn't have the .net framework installed it won't work, but that application is not useless. But everyone is entitled to an opinion, so the previous comments are welcome.

by ashok kumar on Tuesday, October 9th 2007 at 07:21 AM

this tutorial not working in IE

by Kadrus on Sunday, November 11th 2007 at 06:06 AM

Well,because IE sucks..it's just a fact..

by Andrei Pociu on Sunday, November 11th 2007 at 10:39 AM

It does work in IE7. Who still uses IE6 anyway?

by Kadrus on Monday, November 12th 2007 at 03:26 PM

Well Apparently a lot of people who have commented this tutorial...IE still sucks no matter what it's version.

by shoey on Thursday, January 3rd 2008 at 04:03 AM

well 60% of users of our sites use ie, and of the 60% 72% use ie 6

so as much as ie sucks the average joe still uses it

by emgee on Monday, January 7th 2008 at 08:53 AM

'If it ain't broke don't fix it' but IE 6 was broke from the start so update it! IE 7 is FREE after all.

What amazes me, as a Firefox user, is I am told all the time about the upgrades, in fact it upgrades happily in the background. Doesn't IE do this? Then it is little wonder the poor average joe is stuck with IE6 and web-designers have to spend hours coming up with hacks to make a non-standard browser work. Microsoft have a lot to answer for.

by Kelly on Tuesday, January 8th 2008 at 12:24 PM

The point they're making is that websites should be made for maximum compatability. If this menu does not work on the browser the majority of people use, then it's useless to webdesigners who want to reach a large number of people. We can't force people to upgrade their browsers, so the best thing to do is design for people who DO have crappy browsers. If you design for IE 6, it'll work in FF. It doesn't work the other way around.

by Boutros on Wednesday, January 23rd 2008 at 01:09 AM

Hi Sorin Sodolescu,

Great code you got for the menu.
You suggested in an earlier post that this menu could work in IE6
if you use a .htc file. Can you show us how?

Thanks.

by Sorin Sodolescu on Wednesday, January 23rd 2008 at 07:40 AM

Hi Boutros.
First of all you will have to download the .htc file -http://www.xs4all.nl/~peterned/csshover.html. You may also want to read what the author wrote there.
To enable hovering in IE6, you simply have to put these lines in the head section of your code:

Of course, you have to use the appropiate URL.
Here is a small example for enabling hover with div elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style.css"/>
<title>Test</title>

</head>
<body>
<div class="s1"> Style1
</div>
<div class="s2"> Style2
</div>
<div class="s2"> Style2
</div>
<div class="s2"> Style2
</div>
<div class="s2"> Style2
</div>
</body>
</html>
I hope you will find this useful. Good luck with your code!

by Boutros on Wednesday, January 23rd 2008 at 10:45 AM

Hi Sorin,

Thanks for your feedback about the hover in IE6.
I got the menu to work in IE6 (using the *.htc file) but the alignments for the sub-lists are OFF, and also the I noticed that the grandchild list is hard to activate, it disappears before being able to click it, plus other styling issues. Your code at the top of the page works great for IE7, Mozilla/Firefox 2+, and Opera+.
Would it be too much to modify your top code so that your code works in IE6 too (IE6/IE7 and the rest). Believe it or not a lot of people and companies are still using IE6 (I don't know why?)

Thanks for your help.

by Sorin Sodolescu on Wednesday, January 23rd 2008 at 11:55 AM

Hello Boutros

I do know that a lot of people still use IE6... this tutorial was meant only to be a nice and clean menu for modern browsers. (It works well in Safari 3 - Windows too). Unfortunatelly, I can't rewrite the CSS, because I can't test it in IE6 (I don't have it installed, and software like Virtual PC is not an option right now). I suggest you create a CSS file for IE6 and one for IE7, and use proper conditional comments, in order for the menu to look good on all browsers.
<link rel="stylesheet" href="NonIEcssMenu.css" />



I hope this help.
Best regards,
Sorin

by boutros on Friday, January 25th 2008 at 11:10 PM

Thanks Sorin for all your suggestions. It works great in IE6 now,
in addition to all modern browsers.

Take care,

Boutros.

by donkie on Wednesday, January 30th 2008 at 07:26 AM

@boutros:

can you post your css-code for ie6, please?

by boutros on Sunday, February 3rd 2008 at 11:15 AM

Hi Sorin,
I just realized when I loaded the menu to the server, it stopped
working in IE6. I did all the menu testing, on my local C drive and it was working great on IE 6.

Do you have any idea, why when I loaded the menu file to the
server, the menu does not work anymore in IE6???

Any suggestions?

@donkie: when I am successful for the server part, I will be happy
to post a copy.

Thanks,

Boutros.

by Sorin Sodolescu on Tuesday, February 5th 2008 at 09:27 AM

Hi Boutros,

I don't really know why you're having that problem, but one answer might be that the browser's security settings is blocking the .htc file, because the page is not ran locally, but from a server. If this is the case, then I'm sorry, but the CSS menu + htc file isn't a reliable solution for IE6.
Good luck finding a fix for your problem!
Sorin

by Anish on Tuesday, February 19th 2008 at 07:05 PM

Hey boutros, did you ever get the above file working for IE 6? has anyone been able to make the above drop down menu work in IE 6?

Anish

by boutros on Thursday, February 21st 2008 at 05:04 AM

Hi Anish,

No, I was not able to get the menu to work in IE6. I suspect,
like Sorin said, that the security setting on the server was
blocking the execution of the htc file.

So I dropped it.

Boutros.