Easy CSS Dropdown Menus

By Rob Glazebrook on May 12, 2008

Attractive dropdown menus have long been the realm of Flash developers and advanced JavaScript gurus. But that needn’t be the case. This tutorial will walk you through developing a clean, semantic dropdown menu using XHTML and CSS that works in all modern browsers!

Let’s start with the XHTML first and foremost. It’s surprisingly simple:

<ul id="navbar">
	<li><a href="#">Item One</a><ul>
		<li><a href="#">Subitem One</a></li>
		<li><a href="#">Second Subitem</a></li>
		<li><a href="#">Numero Tres</a></li></ul>
	</li>
	<!-- ... and so on ... -->
</ul>

As you can see, our navigation bar consists of nested unordered lists and anchor tags. The key to this working correctly is to properly nest your unordered lists, wrapping the list item around the unordered list that is nested under it (for more on that topic, see this article on styling nested lists). The main list items will be our main navigation bar, while the nested unordered lists will become our subnavigation elements. The navigation bar also works without submenus, so you can mix and match as needs be. Also note that, other than an ID on our primary containing unordered list, there are no additional classes or IDs required!

Next, we’ll start adding a few styles to our navigation bar:

#navbar {
	margin: 0;
	padding: 0;
	height: 1em; }
#navbar li {
	list-style: none;
	float: left; }
#navbar li a {
	display: block;
	padding: 3px 8px;
	background-color: #5e8ce9;
	color: #fff;
	text-decoration: none; }

Here, I’ve removed the margin and padding from the main list, removed all list styling from all the list items, and floated the individual items left. I’ve also added a bit of styling to the anchors, just to make it look a little more like a navigation bar. As you can see, this really isn’t any different than making any other sort of navigation bar to start out with.

The only real oddity here is the “height: 1em;” rule on the navbar ID: this forces the navbar to have a specific height (1em) and width (100% by default), meaning I don’t have to do anything special to “clear” the navigation afterwards. Without that rule, I’d generally need to apply a “clear: left;” to whatever came immediately after the navigation to prevent it from trying to fill the space voided by those left-floated list items. The actual height is arbitrary: as long as a height is specified, the list will retain its block-level status.

Next, we can apply some styles to the subnavigation section:

#navbar li ul {
	display: none; 
	width: 10em; /* Width to help Opera out */
	background-color: #69f;}

This is pretty straightforward: we’re applying a display: none to prevent the submenu from displaying by default, and giving it a background color to make it stand out against the background. The only odd bit is the width property, which is mostly there to prevent Opera from doing some weird things with the width of the submenus (Opera makes them strangely small without a width specified). However, it also ads a nice bit of consistency to the submenus, so I don’t really mind the “fix.” I chose 10em because that allowed all of my submenu items to exist on one line, but you could choose whatever size works for you.

Now all we need to do is style the list for its “hover” state:

#navbar li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li {
	float: none; }
#navbar li:hover li a {
	background-color: #69f;
	border-bottom: 1px solid #fff;
	color: #000; }
#navbar li li a:hover {
	background-color: #8db3ff; }

Let’s go through this bit by bit. The first rule causes the submenu to reappear when the user hovers over the containing list item (this is where the properly nested lists come in handy). We’re using position: absolute on the menus to ensure they don’t push any content below the navigation out of the way. The margin and padding are simply getting rid of the default spacing on the lists so we can style them ourselves.

Next up comes the “float: none” rule on the list items. This is just preventing the items in the submenu from floating left: it’s counteracting our previous “float: left” rule so that our submenu doesn’t mimic our main navigation elements.

The rules we’re applying to “#navbar li:hover li a” are purely stylistic: I’m applying a background color, bottom border, and changing the color of the anchor. You could set these to be anything you wanted whatsoever.

And finally, I’m applying a different background color to the anchor when it’s being hovered over, just to help set it apart from the other items in the list. This is to improve usability: the user can easily see which item their cursor is over.

That’s all it takes! You can see a working example here. I’ve tested this and found it working in Firefox 2, IE7, Opera 8.5+, and Safari for Windows. Of course, you’ll note that I’m leaving out the usual party pooper: Internet Explorer 6. Because of IE6’s limitations on :hover states (you can only hover over anchors in IE6, instead of any element like in all the other browsers), this fantastic little technique doesn’t work. Unless, of course, you’re willing to add in a couple of lines of JavaScript.

The brilliant hive mind that is Patrick Griffiths and Dan Webb have come up with a fantastic JavaScript solution for Internet Explorer that solves the :hover problem in just 12 lines of code. The version I’m using looks like this:

sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

The concept is pretty brilliantly simple (even if the code looks complex). The function goes through your document and finds every list item contained within the “navbar” id (you could change this to be whatever you wanted). It then applies a “mouseover” and “mouseout” state on every item: it adds a class of “hover” to the list item whenever it’s being moused over, and removes it when the cursor wanders off. The result is you can then apply your CSS to the .hover class as well as the :hover pseudo-class and create identical results across the board. So all you need to do is modify your CSS like so:

#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li, #navbar li.hover li {
	float: none; }
#navbar li:hover li a, #navbar li.hover li a {
	background-color: #69f;
	border-bottom: 1px solid #fff;
	color: #000; }

And that’s it! With just three tiny changes to your CSS and a dozen lines of JavaScript, you have a CSS dropdown solution that works on every single modern browser – even the ones that aren’t exactly standards-compliant.

167 Comments

On May 12, 2008
3:35PM

Niki Brown said:
How is this better than the tried and true suckerfish dropdowns or son of suckerfish dropdowns?
On May 12, 2008
3:45PM

Rob Glazebrook said:
Hi Niki,
There’s not really a huge difference between mine and the Suckerfish version — the JavaScript I’m recommending is from the Son of Suckerfish dropdowns page, even. But I decided to write about dropdowns for two reasons:
1. I do things a little differently than they do (not better or worse… just different).
2. I can explain it in a different way, which will hopefully make sense to different people.
Just because someone has already done something similar elsewhere on the web doesn’t mean I can’t (or shouldn’t) offer my own perspective… otherwise, every CSS site out there could just link to the CSS spec sheet and tell people to figure it out themselves! :)
On May 12, 2008
10:14PM

Abhisek said:
ver nice and explains everything. i used to be scared of creating a drop down. now it seems too easy
On May 12, 2008
11:45PM

David Hucklesby said:
Nice.
While you are at it (adding JScript for IE6 that is) you *could* go the whole hog and use Dean Edwards’s IE7 to make IE6 behave:
http://dean.edwards.name/weblog/2008/01/ie7-2/
On May 23, 2008
2:56PM

Damon said:
Thanks for this. I like it, it has helped me already!!
I was wondering… I know it’s possible to add one more level to this menu, but just can’t figure it out.
Any insight?
Thanks again.
On July 01, 2008
7:15AM

John Law said:
Many thanks for the drop-down navigation model which I’ve adapted for the update of my site. Having decided to use dropdowns I tried and failed with numerous ‘fishy’ variations until I discovered yours.
Though I work on a mac, with VMWare I am able to run XP & was able to test in XP Firefox & of course the clunky Explorer which broke all the other variations I tried, probably due to my incompetent implementation.
Please take a look at the site:
john-law.org.uk/new-site
any comments welcome before it goes live next week.
On July 01, 2008
7:44AM

Rob said:
That looks like a great implementation, John! Simple, lean, and attractive. I’m glad the tutorial was able to help.
On July 10, 2008
5:50AM

Sonam said:
Hi,
Thanks a lot! , best dropdown I came across…clean and effective.
Keep up the gud work dude.
On July 29, 2008
3:51PM

jon said:
I like this adaptation of the suckerfish menus, but am having trouble getting enough width for my li li elements.
The background color is displaying wide enough, but the nested list links are breaking across a line return.
A short version is on http://www.radford.edu/~jcharris/tmp1/dropdown.html
You can see the difficulty under “Ways to Give” & “Leadership”.
Any tips?
Thanks!
On July 29, 2008
4:45PM

Rob Glazebrook said:
Hi Jon,
The problem stems from this rule:
#navbar li { width: 100px; }
That rule is doing two things: it’s setting a defined width on your top-level navigation, which is what I think you’re going for. However, it’s also setting a defined width on the list items in your ~secondary~ nav, which isn’t what you’re going for.
So to counteract that rule, you just need to write a more specific rule for subnavigation. This should work:
#navbar li li { width: 150px; }
That way, your subnav items should fill up the full 150px you’ve given them.
On September 18, 2008
5:40PM

punjabiace said:
can u create a vertical sub drop nav bar
On November 28, 2008
1:38PM

Vince Mendella said:
I have put this menu into a site that I am working on but have run into a large problem. The sub-menus seem to be off center. It seems when I roll over a heading in the menu the drop down sub-menu is off to the right hand side. I am not sure on how to fix this. If someone can take alook, I have the CSS in the head of the file.
http://www.mts.net/~vmendell/indextest.html
It works fine on Firefox and Safari, but when I test it on Explorer the menu is off center.
Thank you,
Vince Mendella
On December 08, 2008
8:30AM

satish said:
Thanks you very much…
Your script is very simple and to the point..
On December 08, 2008
4:51PM

Scott C said:
I love this menu but have one problem. I want the menu to be transparent because I have an image behind it, so I tried background-color: transparent and then just no background color at all. While the menu will display ok in IE and the dropdown appears, when you mouse down to the list, the dropdown disappears. Of course, I don’t have this issue in Firefox.
On December 18, 2008
1:31PM

Anne said:
Thank you for this tutorial. Your explanation made it so much easier with what had to be done. However, I do have a question. I actually used this code for my blog site (blogger), and it seemed to work in the updated version of IE, but not for IE6. I did include the Javascript where I had my navbar, but i couldn’t add where you actually edit the html code for your layout. I would get an error message because of this part of the string i<sfEls.length; I guess because of the open <. Is there anyway to fix this? Thanks!
On January 14, 2009
9:25PM

Anton Ongsono said:
any demo?
On January 14, 2009
9:32PM

Rob Glazebrook said:
Hi Anton, you can see a demo here:
http://www.cssnewbie.com/example/css-dropdown-menu/
On February 05, 2009
6:16AM

Marcel Doornbos said:
It doesnt work for Firefox 3.0.5 :)
On February 05, 2009
10:04AM

Rob Glazebrook said:
It works for me in Firefox 3.0.5… what are you seeing in its stead?
On February 05, 2009
10:47AM

Marcel Doornbos said:
Hi,
Sorry for that :) I just found out that i forgot to change the id in the javascript code :D it now works fine :)
On February 12, 2009
5:32PM

krish said:
Nice article, it helped me in creating the css menu at ease. I tried to implement three level menu, like parent, child and submenu but i am facing a problem. when i try to select the submenu(third level) it disappears. Can you please help me out in solving this issue.
Thanx
On February 22, 2009
6:14AM

melissa said:
How do you make this whole thing centred on the page i can get everything else working fine but nothing i do will center it
On February 23, 2009
9:54AM

Amy Butler said:
I’m having the exact same problem as Vince Mendella described above (Nov. 28). Any advice?
On February 23, 2009
10:18AM

Amy Butler said:
Never mind my question. I was able to nudge the drop-down menu to the left, so that it falls directly under the correct li element, by adding top and left properties to my css:
#topnav li:hover ul, #topnav li.hover ul {
display: block;
position: absolute;
top:20px;
left:0px;
width:85px;
margin: 0;
padding: 0;
background-color:#ffffff;
opacity:.850;filter: alpha(opacity=85); -moz-opacity: 0.85;
}
Thanks for the great dropdown.
On March 20, 2009
10:35AM

Aaron Presuhn said:
This works great in IE7, however in IE6 soemthing weird is happening. I’m using this in a coldfusion 8 application. I have a coldfusion form with some input and select boxes. For some reason, when the list pops out..it is UNDERNEATH a box. will go over a like normal. Any ideas?
On July 04, 2009
8:08PM

sean said:
I’m using this technique for a web interface to an embedded system. One of the pages is attached inline below. It works fine except on IE6 some of the GUI controls (e.g. combo box) appear ON TOP of the pulldown menu. I only see this on IE6. Any easy way to fix this?
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
Barometer Configuration
var XmlHttp = null;
function Init() {
if (window.XMLHttpRequest) {
XmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XmlHttp = new ActiveXObject(‘MSXML2.XMLHTTP.3.0′); // TODO : test this on earlier IEs
}
else {
alert(“Your browser is too old to support dynamic value updates”);
}
if (XmlHttp) {
setInterval(GetData, 1000);
}
}
function GetData() {
XmlHttp.open(“GET”,”/update.html?id=” + Math.random(), true);
XmlHttp.onreadystatechange = Update;
XmlHttp.send(null);
}
function Update() {
if (XmlHttp != null && XmlHttp.readyState == 4) {
if (XmlHttp.status == 200) {
var r = XmlHttp.responseText.split(“|”);
document.getElementById(“mytable”).rows[2].cells[1].innerHTML = “” + r[9] + ““;
document.getElementById(“mytable”).rows[0].cells[1].innerHTML = “” + r[10] + ““;
}
}
}
sfHover = function() {
var sfEls = document.getElementById(“navbar”).getElementsByTagName(“li”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” hover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” hover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);

System Set-Up & Status
NMEA Output
Channel 1
Channel 2
Channel 3
Channel 4
UDP Output
Channel 1
Channel 2
Channel 3
Channel 4
Barometer
Barometric Pressure

Reset Barometer Sensor
Units
Temperature (Motherboard)

Units
On July 07, 2009
10:33AM

Kirby said:
Love how simple you make this. The only thing that illudes me is creating a sub menu pop up. For example lets say our code looks like
ul
li Item 1 /li
li Item 2
ul
li sub item 1
ul
li sub sub item 1 /li
/ul
/li
li sub item 2 /li
/ul
/li
/ul
What ends up happening is that sub sub item 1 keeps showing up regardless of if I’m hovering over sub item 1 or sub item 2. I’m stumped, any ideas?
Thanks.
On July 13, 2009
7:47AM

abhay maini said:
EXCELLENT WORK guys, for ppl like me who have no time designing website but are busy doing prograaming this is great,
thanks guys for free stuff, god bless ya
On July 20, 2009
12:15PM

Svenjafour said:
Thanks so much for this easy to follow tutorial. I had one issue that I ran into, though. When hovering over the main menu item, the drop-down shows correctly, but the border bottom only displays for the width of the sub-menu text and not all the way across. Any idea what may be the solution to this? Here’s the code:
#Menu {
width:750px;
float:left;
clear:both;
display: block;
font-weight:bold;
Margin:0px 0px 20px 0px;
padding:0px 0px 0px 0px ;
height: 2em;
border-top:solid 1px #FFFFFF;
background-image: url(images/MenuBackground.gif);
}
#Menu li {
list-style:none;
float:left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px ;
}
#Menu li a {
display: block;
float:left;
padding:2px 3px 2px 3px;
color:#000000;
margin:4px 10px 3px 10px;
text-decoration: none;
}
#Menu li ul {
font-weight: normal;
display: none;
width: 10em;
background-color: #A3D3FF;
}
#Menu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#Menu li li {
width: 250px;
}
#Menu li:hover li {
float: none;
}
#Menu li:hover li a {
background-color: #A3D3FF;
border-bottom: 1px solid #00086F;
color: #000; }
#Menu li li a:hover {
font-weight:bold;
background-color: white}
On July 22, 2009
8:31AM

Svenjafour said:
I fixed the line all the way across, but now my drop-down menu disappears in IE before I can select any of the sub-menu items. Any suggestions how I may fix it? I’d greatly appreciate it.
On July 28, 2009
8:50AM

John Doe said:
Thank you SIR.!!!!!
im new to CSS menus and this post made it real simple.
Thanx again !!
On July 29, 2009
8:27PM

Jen said:
I am kinda new at this stuff. I normally just edit websites but now I am creating one. I am using Frontpage – I know a dinasour! The computer guy recommended it (he is terrible!). Anyway – I want to use this drop down menu – it looks perfect for what I need. However I can not get it to work! Am I supposed to copy this just how you have it. I know that I can edit colors and change all the URLs and stuff. But I cant get the links to work or the setup right. When I insert the code it is there but with the ‘text’ code, if that makes sense. What step am I missing? Any help would GREATLY be appreciated!
On August 07, 2009
11:16PM

Lily said:
Thanks, this is great! Is there any way to change just the font size of the text in the dropdown menus, though?
On August 09, 2009
7:59AM

Rob Glazebrook said:
Hi Lily,
That’d be easy enough to do. I’d suggest changing the font-size property inside the #navbar li li a element. So something like this:
#navbar li li a { font-size: 120%; }
On August 11, 2009
2:56PM

Jimmy said:
How would you add a sub menu to another sub menu with this example ?
Example:
Manu 1
– Sub Menu 1
– Sub Menu 2
-Sub Menu 1 of Sub Menu 2
-Sub Menu 2 of Sub Menu 2
-Sub Menu 3
On August 29, 2009
12:11AM

Richard Myers said:
Hey guys!
Im helping a friend out by designing her website for her up and coming business. I wanted to use a nav menu exactly like this one but I’m having the most simple and silly problem… I cant get the menu to center on the page. I’ve tried #navbar{display:block; margin:auto;} but it doesn’t seem to work. Any thoughts?
On August 29, 2009
11:02AM

Rob Glazebrook said:
Hi Richard,
The margin: auto trick only works if you have a width specified for your object. So you’ll also need to give the navbar a specified width (and not 100%!) before you’ll be able to auto-center it.
On September 08, 2009
4:30PM

Robbert van Beek said:
“Svenjafour said:
I fixed the line all the way across, but now my drop-down menu disappears in IE before I can select any of the sub-menu items. Any suggestions how I may fix it? I’d greatly appreciate it.”
I have it too, the submenu disappears when i hover my moude over another element that it contained in a div beneath the menu. Any suggestions?
cheers!
On September 08, 2009
6:49PM

Richard Myers said:
Thanks a lot!!!! It worked great! Check it out and see what you think of this adaptation…
http://www.forcewearinc.com/ShanasCloset
On September 11, 2009
2:32AM

Rita said:
I followed your code and everything works fine in all browsers besides IE6..the drop down menu does not reveal the submenus even with the javascript added. Any help would be greatly appreciated!!
On September 11, 2009
2:46AM

Robbert said:
I found the solution to my problem, maybe it’ll help others: I added
display: inline-block;
to the li:hover li, li.hover li style…. no more trouble!
On September 14, 2009
4:28PM

Rita said:
This is a great method and works fine, EXCEPT I am too dense to figure out how to use it to link to external websites. It just links within my blog! How do you link to other sites, like http://www.cnn.com or something like that?
And also, is there a way to shift it to the right or center it in the middle of your blog? I use Blogger by the way.
Rita
Thanks!
On October 08, 2009
3:36PM

Maurine said:
I managed to create a drop down and modified it so when I hover over the main nav bar, it changes color. I would like the nav bar to be centered on my page and cannot figure out how to do that. Thanks!
On October 08, 2009
10:10PM

Richard Myers said:
Hey Maurin, I had the same problem, basically you need to give the nav menu a width and then make the margins Auto left and right. Thats easy as…
#nav-menu
{
width: 200 px;
margin: auto;
padding: 0;
…
}
On October 09, 2009
10:38AM

Maurine said:
Richard, guess I missed your previous post on this subject. I added the width, but then it makes the nav bar vertical instead of horizontal. Do I put width in #navbar?
On October 09, 2009
11:03AM

Rob Glazebrook said:
Hi Maurine,
Yes, you’d put the width on the #navbar element. The width you choose is entirely up to you… it should be exactly as wide as you want your entire navigation bar (links + background) to be. So if your site is 800px wide, choose 800px. After that, Richard is right: a margin of “auto” on the left and right sides will center your element.
On October 09, 2009
11:20AM

Maurine said:
Rob, my nav bar doesn’t fit the entire page. Plus, I’m doing a page for work Intranet so several inches on the very left and top are uniform layout and inaccessible. I am just able to modify the middle portion and the site is set up it doesn’t fill the whole browser–about 3 1/2 inches on the right is white space.
I have the header centered and then wanted the nav bar under it centered so it looks nicer than if it’s only indented a bit, but it’s not cooperating.
On October 16, 2009
3:43PM

Austin said:
How do I make it so my navbar fills up the whole div that its located in?
On November 03, 2009
1:34AM

Jon Boy said:
This code is simply awesome!!!
I have been toying with it and have almost whre I want it…
except i can’t figure out why the search function I’ve pasted into the bar doesn’t conform to the bars style.
http://ksokradio.com/pages/5525979.php
any ideas?
On November 10, 2009
10:28AM

Rob G. said:
The technique works really well and was easy to implement, however, I’m having one serious problem.
When I hover over the main nav the sub nav pops in. However, when I move my cursor off the main nav item to click on the sub nav menu item, the sub nav menu goes away.
Any thoughts?
On November 10, 2009
11:29AM

Rob Glazebrook said:
Hi (other) RobG,
Generally speaking, if the submenu disappears before your mouse can get to it, that suggests you have a margin between your main list item and your submenu. You might need to write a more agressive “margin: 0″ rule on all of your navigation uls and lis to account for a conflicting rule somewhere else in your site’s stylesheet.
The brass tacks: hover works on padding, but does not on margin. You can use padding to create space. Margin is right out.
On November 17, 2009
1:22PM

Aaron said:
This is working beautifully for with one exception. The Submenus show up in the far left corner of the div containing the menu. Do you have any ideas what may be causing that?
On December 07, 2009
9:13PM

paul said:
hey. nice find. everything is working fine but once the menu drops and i try to click on the sublinks, they go away. can some one help me? i pretty much copy pasted it to see if i had typos but doesnt seem to be the case..
thanks
On December 09, 2009
8:38PM

Rolly said:
The CSS menu is cool. But I have a little problem: the menu list stays after I clicked on an item, which is an unexpected menu behavior. How can I make the menu list closed on click? Thanks.
On December 22, 2009
12:17PM

al said:
hi there!
thank you for a code, the best i could find!
there’s only one thing that annoys me: when menu is in the table raw, the unwanted 2-pixel line appears below it, and I don’t know how to remove it.
here’s the code of the page
Untitled
#navbar {
width:430px;
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
height: 20px;}
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 0px 0px;
background-color: #fff;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 171px; /* Width to help Opera out */
background-color: #CC6600;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #CC6600;
border-top: 1px solid #fff;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000; }
#navbar li li a:hover {
background-color: #ffcc00; }
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById(“navbar”).getElementsByTagName(“li”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

<img src="wpix.gif" width="1" height="20"

• author1
• author2
• author3
<img src="wpix.gif" width="1" height="20"

<img src="wpix.gif" width="1" height="20"

• project1
• project2
• project3
<img src="wpix.gif" width="1" height="20"
On January 19, 2010
4:32PM

Sree said:
Hi,
Thanks a lot! Best dropdown I came across…clean and effective.
I have placed the dropdown on the upper right corner of the site. When I minimize the window in IE, the right side of the menu is getting cut off. It wraps on to the next line in Firefox. Is there a way that I can make it work in IE too? Please let me know.
Thanks
Thanks
On January 19, 2010
6:26PM

chuck said:
Had the same problem with the submenu going away as I tried to make a selection. The sub menu went beyond the menu layer it was in. I enlarged the menu layer and the pull downs work great.
Thanks for the code!
On January 21, 2010
8:29AM

Huma said:
hi
i have use this code really this code is awesome but have just one problem with it that doesn’t work IE6. please tell me the solution of this problem.
On January 23, 2010
5:28PM

Susan L said:
Hi. I am desperate for help. Have been trying for days to get this drop down menu to work in IE6. It shows the main menu items as vertical, not horizontal in IE6 and earlier. The website is 2 columns with a header and a footer. Here’s the navbar CSS if someone would be kind enough to look.
#navbar {
margin: 0;
padding: 0;
background-color:#5CACEE;
height: 20px; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: bold;
display: block;
height: 18px;
padding: 1px 12px;
background-color: #5CACEE;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 11em; /* Width to help Opera out */
background-color: #5CACEE;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #5CACEE;
border-bottom: 1px solid #fff;
color: #fff; }
And here’s part of the html…
sfHover = function() {
var sfEls = document.getElementById(“navbar”).getElementsByTagName(“li”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Home
SPECIAL OFFERS
Current Specials
Stock Machine Specials
…etc.
It works perfectly everywhere else, but in IE6 the navbar gets huge with a vertical list of the primary menu items on the left side of the screen.
Thanks in advance for any assistance.
On February 06, 2010
5:20AM

Kenny said:
Thanks a bunch!
On February 09, 2010
10:20AM

Jeremy said:
Hi Rob,
Thanks for the post. Very helpful.
I’m wondering if there’s a way to keep the top menu items (#navbar li a:hover) activated while hovering over the submenu (#navbar li li a)?
I need a specific background position on the top menu items so both the top menus and sub menus appear continuous. Very similar to how it looks on http://www.target.com for example.
Thanks in advance!
On February 21, 2010
8:55PM

Jeremy said:
Hey, this is pretty rad. I’ve been wanting to get my brain around this for a while. I thought I had, thanks to your post here, but I’m having a tiny bit of trouble. It works fine in IE (shock), but in all other browsers, the drop-downs disappear before the user has a chance to hover over them. As soon as the mouse focus leaves the navbar ul, the drop-down stuff disappears. Any idea what I may have missed?
On March 03, 2010
12:53PM

ChingH said:
Hi Rob,
Thanks for your post.
I had a web page which was built up by a Master page and a content page. In my master page, I added a TopContent and a navigation bar underneath the TopContent. MainContent was put in the content page. The first time I moved the mouse on the navigation bar, every thing was fine. The dropdown menu was on top of default page. It was supposed to be. The problem is the second time when I move the mouse on the navigation bar. The dropdown submenu was covered by the MainContent. I took the code from Easy CSS Dropdown Menus as an example. I am not sure why. I am using VS 2008 in XP and one IE6 and one IE7.
I would appreciate if you can help me out of this problem. Thanks.
chingH
On March 04, 2010
7:43AM

Steph said:
This is awesome, and just what I’ve been trying to find! I’ve been trying for a couple of days to figure out a problem though. I cannot for the life of me get my links to be side by side, as yours are, with the menu dropping beneath them, only in a vertical list, so when the submenu appears nothing is legible. I just can’t figure out where I’m going wrong! Here’s my CSS for the navigation:
#navigation
{
text-align:center;
}
#navigation p
{
margin-top: 0px;
}
#nav, #nav ul
{
padding: 0;
margin: 0;
list-style:none;
}
#nav a
{
width: 800px;
}
#nav li
{
width: 800px;
}
#nav li ul
{
position: absolute;
width: 800px;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul
{
left:auto;
}
Where am I going wrong?! This is driving me nuts!
On March 04, 2010
8:30AM

Rob Glazebrook said:
Hi Steph,
From what I can see of your CSS, you’re not floating the list items left. Without that, your lists will behave like normal lists and stack vertically instead of horizontally.
On March 04, 2010
2:51PM

Steph said:
Hi there!
I’ve managed to get it working, yay! Thanks for your help – can I dig a little further?
Firstly, a minor thing, my dropdowns don’t have a border, apart from the on the right hand side? There was one place in my code that only had a border on the right hand side, and I adapted that, but no change? I may just have become blinded to it from having been looking at it all day.
Here’s the code..
#nav
{
width: 100%;
float: left;
margin-left:auto;
height: 26px;
padding: 0;
list-style:none;
background-color: #9acab4;
border-bottom: 1px solid #117478;
border-top: 1px solid #117478;
border-right: 1px solid #117478;
}
#nav li
{
float: left;
list-style:none;
}
#nav li a
{
display:block;
padding: 3px 8px;
text-decoration:none;
font-weight: bold;
font-size:16px;
color: #043c52;
border-right: 1px solid #117478;
border-bottom: 1 px solid #117478;
border-left: 1 px solid #117478;
}
#nav li ul
{
display:none;
width:10em;
background-color:#9acab4;
}
#nav li:hover ul, #nav li.hover ul
{
display:block;
position:absolute;
margin: 0;
padding: 0;
}
#nav li:hover li, #nav li.hover li
{
float:none;
}
#na li:hover li a, #nav li.hover li a
{
background-color:9acab4;
border-bottom: 1px solid #117478;
border-right: 1px solid #117478;
border-left: 1px solid #117478;
color: #043c52;
}
#nav li li a:hover
{
background-color:#9acab4;
}
Also, now I need to make it multi-level, and trying to reconcile what the sons of suckerfish tutorial says about making that happen with what I’ve already done from here is beyond confusing, do you have a tutorial about making this multi-level?
Thanks if you can offer any help, I’m learning all of this as I go along and haven’t got used to it much yet!
Steph
On March 06, 2010
1:02AM

Elaine said:
Hello, I love the dropdown you’ve made, but I’m having a problem. I am VERY new to CSS and am having a really hard time.
I just want to center my nav bar. I know you’ve covered this, but I just can’t get it to work. I can’t seem to figure out where to put the:
width: 200 px;
margin: auto;
that I saw Richard Myers and you talk about. I hate it that I need you to be more specific. Here is what I have:
/* These styles create the dropdown menus. */
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #FFFFFF;
color: #000000;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #000000;
border-bottom: 1px solid #fff;
color: #fff; }
#navbar li li a:hover {
background-color: #000000; }
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls =
document.getElementById(“navbar”).getElementsByTagName(“li
“);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("
hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
I would appreciate any help!!!
Thanks
Elaine
On March 11, 2010
12:51PM

Wayne said:
hi Could I get some help with this I have a drop down that on my test machine works fine I still get the error Message: ‘document.getElementById(…)’ is null or not an object
but cant seem to get rid of it on live machine.
On March 15, 2010
11:04AM

Kate Nettell said:
Hi,
Thank you for the drop down list. I can get part of it to work. I am having trouble with the sub-menus, you can go four items down the list then the drop down disappears, I have been looking at both the css and html but cannot work out what is wrong. Can anybody help?
#navbar {
margin: 0px;
padding: 0px;
height: 1em;
}
#navbar li {
list-style: none;
float: right;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #ffffff;
color: #696666;
text-decoration: none; }
#navbar li a:hover{
text-decoration: underline;
}
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #f3bef4;
font-size: 14px;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #f3bef4;
color: #696666;
text-decoration: none; }
#navbar li li a:hover {
background-color: #ffffff;
text-decoration: none; }
About Us
Training
Price List
Waxing
Facial Treatments
Electrolysis
Red vein and Skin tag Removal
Ear Piercing
Nail Treatments
St Tropez Tanning
Eye Treatments
Massage Treatments
Holistic Therapies
Make Up
Treatments For Men
Home
On May 12, 2010
4:01PM

Debbie said:
I have my menu almost working perfect. My problem is when I move down the page and happen to move my mouse the one submenu opens, how do I stop this from happening?
Thanks
On May 19, 2010
2:00PM

sivaranjan said:
Loved the post.
I am taking the liberty of adding a reference to your article on my CSS aggregator site. Do let me know if you are ok with this.
On May 26, 2010
1:16PM

Noah said:
I guess I’m a bit late to the party, being new to CSS and all; I’m interested in learning to do what Maurine mentioned: modifying it so when you hover over the main nav (such as hovering over item one), that color changes as well. Any ideas?
On June 05, 2010
2:25AM

ora said:
Great, very simple & easy steps for drop down menu.
On June 14, 2010
10:05PM

Kim said:
Hi,
Thank you for this! It’s been a great help but.. I need help removing the spacing between the header and the navigation bar. I’m unsure what is doing it.
On June 25, 2010
9:08AM

Amit said:
I had trouble with explorer it would look bad until I saw I didn’t have to declare my document. Make sure to check that at the top of your html file.
I was using
On June 30, 2010
12:28AM

CT said:
Hi there,
Thanks for the explanation and codes. However, I am newbie to this drop down menu setup. I am having problem in putting the code in my blog. The submenus appear but not it disappear when moved the mouse (not able to select it).. and the submenus are more to the left…
Really need your help… thank you so much in advance.
Cheers!
On June 30, 2010
2:55AM

CT said:
This is the code I put in my blog (before ]]>)
body {
behavior: url(csshover.htc);
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
}
p a {
color: #000;
text-decoration:underline!important;
}
a{
color:#000;
text-decoration:none;
}
p a:hover{ text-decoration: none!important;
}
ul#nav {
list-style: none;
padding: 0;
margin: 0;
}
ul#nav li a {
display: block;
font-weight: bold;
padding: 2px 10px;
background:#f9f9f9;
}
ul#nav li a:hover{
background:#888;
color:#fff;
}
ul#nav li {
float: left;
position: relative;
width: 100px;
text-align: center;
margin-right:5px;
border:1px solid #ccc;
}
ul#nav li.current a{
background:#ddd;
}
ul#nav li.current a:hover{
background:#888;
}
li ul {
display: none;
position: absolute;
width:100px;
top: 0;
left: 0;
font-weight: normal;
padding: 1px 0 10px 0;
margin-left:-1px;
}
ul#nav li ul.sub li{
border-width:0 1px 1px 1px!important;
}
ul#nav li ul.sub li a{
font-weight: normal!important;
}
li>ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
On August 04, 2010
1:47AM

Sigal said:
Hello,
I am struggling with an horizontal dropdown menu (of course).
I read a lot here and over the net but can’t find the solution.
Just got confused with everything…
Please can someone help?
The problem I have is like others here, on IE8 (didn’t check 6 or 7 yet) the dropdown opens downwards and to the right at the same time.
I want it to open only downwards.
I am using css sprite and not sure how to implement the examples given with my code.
The site is: http://www.artefunto.co.za and the menu shows when you go to any of the pages which are not the home page. The menu item is: ‘Art by Galleries’
My code:
The css:
#nav {
height: 33px;
float: left;
}
#nav ul { list-style: none; float: left; }
#nav li { float: left; background: #000 url(../images/menu.jpg) no-repeat; height: 33px; position: relative; }
#nav li a { display: block; outline: none; background: #000 url(../images/menu.jpg) no-repeat; height: 33px; }
#nav li.home a { width: 120px; background-position: 0 -66px; }
#nav li.about a { width: 81px; background-position: -120px -66px; }
#nav li.art a { width: 127px; background-position: -201px -66px; }
#nav li.plates a { width: 133px; background-position: -328px -66px; }
#nav li.tiles a { width: 96px; background-position: -461px -66px; }
#nav li.testimonials a { width: 103px; background-position: -557px -66px; }
#nav li.contact a { width: 140px; background-position: -660px -66px; }
#nav li.home a:hover { width: 120px; background-position: 0 -33px;}
#nav li.about a:hover { width: 81px; background-position: -120px -33px; }
#nav li.art a:hover { width: 127px; background-position: -201px -33px }
#nav li.plates a:hover { width: 133px; background-position: -328px -33px }
#nav li.tiles a:hover { width: 96px; background-position: -461px -33px }
#nav li.testimonials a:hover { width: 103px; background-position: -557px -33px }
#nav li.contact a:hover { width: 140px; background-position: -660px -33px }
#nav li.aboutActive { background: #000 url(../images/menu.jpg) no-repeat; width: 81px; background-position: -120px 0; }
#nav li.platesActive { background: #000 url(../images/menu.jpg) no-repeat; width: 133px; background-position: -328px 0; }
#nav li.tilesActive { background: #000 url(../images/menu.jpg) no-repeat; width: 96px; background-position: -461px 0; }
#nav li.testimonialsActive { background: #000 url(../images/menu.jpg) no-repeat; width: 103px; background-position: -557px 0; }
#nav li.contactActive { background: #000 url(../images/menu.jpg) no-repeat; width: 140px; background-position: -660px 0; }
#nav ul ul {
position: absolute;
z-index: 500;
}
#nav ul ul li { background: #000; border-bottom: 1px solid #333; height: 27px; }
#nav ul ul li a {
color: #900;
background: none;
text-decoration: none;
padding: 4px;
font-size: 14px;
font-weight: bold;
}
#nav ul ul li a:hover { color: #999; width: 20px; }
#nav ul ul,
#nav ul li:hover ul ul,
#nav ul ul li:hover ul ul { display: none; }
#nav ul li:hover ul,
#nav ul ul li:hover ul { display: block; }
The html:
<?php
if($page != "home")
echo "<a href=\"$server\" title=\"Artefunto home page\"\n”;
else
echo “\n”;
if($page != “about”)
echo “\n”;
else
echo “\n”;
echo “
Clarens
Hazyview
Franschoek
Knysna
\n”;
if($page != “plates”)
echo “\n”;
else
echo “\n”;
if($page != “tiles”)
echo “\n”;
else
echo “\n”;
if($page != “testimonials”)
echo “\n”;
else
echo “\n”;
if($page != “contact”)
echo “\n”;
else
echo “\n”;
?>
Please, please, please, can someone help me?
Thank you very much,
Sigal
On August 04, 2010
1:57AM

Sigal said:
Another problem I have is the design on the home page is totally different between Firefox and IE8.
What the…
Please view the site on both Firefox and IE8, what do I do???
Any links out there to explain css on IE8?
http://www.artefonto.co.za
Thank you again,
Sigal
On August 05, 2010
7:51AM

TROY said:
Hi, I had a read through all the posts and don’t think i came across this problem.
I am using dreamweaver and had trouble center and positioning the menu because it’s position is absolute, i used the whole 50% – pic width trick , though for some reason when the submenu’s appear they are not connected, they are 100px or more lower than should be.
anyone come accross this before ?
On August 08, 2010
5:27AM

Roy said:
Hello,
I have only a problem with the dropdown-menu in IE6. The menu doesn’t drop over some text existing in the content div of my site.
See: http://www.dckirchroaunited.nl/ritt3
When standing in HOME, the menu from BUFFETTEN doesn’t drop down over the text existing on the home page. When there is no text on the background everything works fine. In IE8, Firefox etc the problem didn’t occur.
Could someone help me please?
My CSS code:
body{
margin: 0;
text-align: center;
background-color: #575757;
}
#main_container{
margin: auto;
width: 980px;
text-align: left;
background: url(background.gif) repeat-y 50% 0;
}
#header{
background-image: url(header.jpg);
height: 185px;
}
#navbar {
margin: 0;
padding: 0;
height: 1em;
}
#navbar ul {
padding: 0;
margin: 0;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
background-color: #000000;
padding-left: 1.1em;
padding-right: 1.1em;
line-height: 25px;
font-size: 13px;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 1px;
font-weight: bolder;
text-decoration: none;
color: #af9145;
}
#navbar li ul {
display: none;
width: 14em;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
display: inline;
margin: 0;
padding: 0;
}
#navbar li:hover li a, #navbar li.hover li a {
background-color: #af9145;
border-bottom: 1px solid #ffffff;
color: #000000;
}
#navbar li a:hover{
color: #ffffff;
}
#navbar li li a:hover {
background-color: #03398a;
color: #ffffff;
}
body#home a#homenav,
body#onzezaak a#onzezaaknav,
body#buffetten a#buffettennav,
body#barbecue a#barbecuenav,
body#catering a#cateringnav,
body#contact a#contactnav {
color: #ffffff;
}
#content{
background-color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-align: left;
color: #000000;
padding: 25px;
line-height: 17px;
width: 717px;
float: left;
}
#content a:link, a:visited, a:hover, a:active{
color: #af9145;
}
h1{
margin: 0;
font-size: 12px;
}
h2{
margin: 0;
font-size: 14px;
color: #03398a;
}
h3{
margin: 0;
font-size: 14px;
text-decoration: underline;
}
#right{
background-color: #000000;
width: 213px;
float: right;
}
#footer{
background-image: url(footer.jpg);
height: 25px;
clear: both;
}
On August 08, 2010
4:49PM

salem said:
thanks Rob
that help me alot and save alot of time for me
i had review web site to a friend and he use dreamweaver to generate the menu …
and code was very complicated ..
with my little experience using code is the best way to build clean web site .and make it s you want ..
On August 08, 2010
5:44PM

Roy said:
I’ve already solved my problem by myself.
The solution was HasLayout! So adding “height:1%” to “#navbar li:hover li a, #navbar li.hover li a{” solved the problem.
Now the menu works fine in every browser!
On August 08, 2010
5:47PM

Roy said:
@ Kim
adding:
#navbar ul{
padding: 0;
margin: 0;
did it by me
On August 10, 2010
7:51AM

manmohan said:
I have createsd vertical menu bar.but it is showing spacing inbetween menus.
On August 16, 2010
11:23PM

vijay said:
This article is very helpful for me to create a custom menu for my client….
Thanks a lot buddy.:)
On August 20, 2010
3:07PM

Matt B said:
Hey! Awesome and efficient way of doing this! Thank you.
One question though: How would you go about doing a sub-submenu? Say you wanted Item 1 to drop down and then hovering over SubItem3 opened up another menu. I would like to do this and have SubItem3 open either a horizontal menu to the right or maybe a drop-down starting directly to the right…
On August 23, 2010
10:00AM

Rod said:
Hi Rob
thanks very much for putting this code on your site. i have pretty well got my master page complete except for the submenu’s have a block type space inbetween them (the same size as the submenu’s) – so where i have 4 items in the dropdown it is returning 8 blocks, eg block 1 = item1, block2 = blank, block 3 = item2 and so on. all i want to do is remove these empty blocks, any advice much appreciated, thanks.
On August 25, 2010
7:35AM

Devang said:
nice article…. thanks dude…
bt i got an easy IE6 hack…
here is the fix of IE6 :hover problem….
See:http://www.kavoir.com/2009/01/css-selectorhover-hack-for-ie6.html
just follow the link and fix it..
it really worked fo me……
On August 25, 2010
8:05AM

Steve Mitchell said:
Great CSS, and I managed to get it to work on an existing menu that I had coded in CSS :-)
The site that I am currently trying to get right is at:
http://www.fontanadesign.eu/hpstest
One problem though, the list items sfter the dropdown addition all appear to have a list-style of a bullet point. I have played with adding list-style:none; to various bits of the code but they are still displaying.
CSS for the navigation element is:
#nav {
width:840px;
height:60px;
text-align:center;
margin:0 auto;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
float: left;
margin: 0 0.15em;
}
#nav li a {
background:#fff;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #c00;
color:#c00;
font-size:14px;
font-weight:bold;
text-decoration: none;
text-align: center;
}
#nav li a:hover {
background-color:#C00;
color: #fff;
}
#nav li ul {
display: none;
width: 9em; /* Width to help Opera out */
background-color: #C00;
}
#nav li:hover ul {
display: block;
position: absolute;
top:230px;
margin: 0;
padding: 0;
}
#nav li:hover li {
float: none;
}
#nav li:hover li a {
display:block;
background-color: #C00;
border: 1px solid #fff;
color: #fff;
}
#nav li li a:hover {
background-color: #fff;
color:#C00;
border: 1px solid #C00;
}
The background for the dropdown is also bleeding over the edges of the borders that I set. Any help to resolve these issues would be greatly appreciated.
Many thanks
On August 25, 2010
10:57AM

Rob Glazebrook said:
Hey Steve,
I had luck on your page removing the bullets with a #nav li { list-style: none; } rule.
On August 25, 2010
1:52PM

Steve Mitchell said:
Hi Rob,
That works fine – thanks for your help it’s very much appreciated. Any ideas on the “bleed” of colour around the drop-downs?
Steve
On August 26, 2010
5:25PM

elle said:
Hi there! This is one of the best, most easy-to-understand menu I’ve seen, so thanks for sharing!
Now for my frustration… I put a basic version of this menu on an existing site, but one of the pages has a conflicting, imported style. I’ve narrowed down the culprit:
ul li { padding:7px; }
This imported rule is throwing the menu layout off, but rather than uniquely naming and calling this element in the existing pages (several pages), I thought it would be easier to change up the name I use in the menu css and ID it on the page, but when I try, I just can’t get it right.
I’ve tried giving ALL the and tags the “navbar” id, but no luck.
Where/how do I get rid of the 7px gap in the menu ‘s?
There must be an easy fix that I’m overlooking.
Thanks in advance!
elle
On August 26, 2010
5:48PM

elle said:
Hi there!
I figured it out.. and it WAS a simple solution.
ul.navbar { padding:0px; }
Created a class for it and it worked for me.
:-)
elle
On September 14, 2010
5:30AM

Rae said:
This ROCKS!! Thanks heaps.
On October 04, 2010
11:18AM

Tim Sutton said:
This is a really good drop down menu. Many thanks Rob.
I do however, have one problem.
The #navbar is in it’s own div at the top of my content div followed by a form. When I then click the menu, the dropdown portion goes behind the form contents.
Has anyone come across this, and if so, how did you get round it.
Many thanks
On October 09, 2010
2:43AM

navneet said:
Thanks a lot…….it is the best and simplest navigation bar i have ever seen..
On October 14, 2010
7:00AM

Angela Vickery said:
At last I understand, I am no programmer so had problems with the coding in java etc.. Thankyou for shareing this information, I have been getting very annoyed with myself & the code when I have been trying to do this for ages….I can now complete my new site…
Regards
Angela
(Oxfordshire UK)
On October 20, 2010
1:13AM

rod said:
on aug 26 2010 elle asked about the 7px gap – heres the root cause and a solution for you http://www.scratch99.com/2008/10/centered-fixed-width-layout-css-problem-browser-scrollbar/
On October 21, 2010
3:40AM

julius said:
I found this menu to be a complete nightmare. Sorry but everytime I would adjust the width to spread out across the menu bar it would throw the sub menus off. I adjusted all of them and then had other issues. I deleted it and am using a different one. For those it has worked for…great. Just not doing what I need.
On November 02, 2010
12:45PM

Janet said:
Thank you for your article. I am trying to make this nav bar with 5 elements, only the second one with a drop down. All your references show the titles in the drop down as an href, but I just wanted the 2 items in the drop down to be links, not the title itself. I think this is the reason it isn’t working for me. Any suggestions?
On November 03, 2010
5:05AM

fose septice said:
salut. frumos blog. ce tema de wordpress folosesti? E custom
On December 21, 2010
7:32AM

Kev said:
Super! thanks for this. I really needed this today…
On December 29, 2010
1:50PM

Jean Norman said:
This is very helpful, but I have run into a problem I do not see addressed. The drop down menu requires absolute positioning. That works fine on most of the pages on my site. But on my home page, I have a couple of div boxes to organize columns, and they are relative and float to the left of each other. I am finding my dropdown menus don’t work on the home page, and I think it’s because they conflict with the div below them, which has relative positioning. They just sit on top of the box with the type below showing through. The links above the div box work, but as soon as I get to the third link down, which overlaps the relative div, the cursor loses track of it.
The home page is not live yet, so I cannot direct you there. The dropdowns work on the “under construction” page that now occupies that space (www.lifestoriesnevada.org), so you can see how the dropdown menus are supposed to work. (They all link to a placeholder page until I go live.)
Have I given you enough information to provide a suggestion?
Many thanks,
Jean
On January 03, 2011
12:48PM

Paolo said:
Thanks … very easy to learn and effective!
On January 03, 2011
1:47PM

Jean Norman said:
I figured out my problem. Apparently, the drop down menu did not like an extra div I had created for the layout. It would stop working at the point where the new div began. So I redesigned the page to eliminate the div, and it works fine now. I hope this helps someone else.
On January 10, 2011
1:43AM

Nate Baldwin said:
Hey, I’m not any expert on html/java/css, but I’m trying to figure it out on my own. I have encountered a problem that I have no idea how to fix…..
Instead of using text for the nav bar, I am using images (of text…i know seems kinda pointless, but it ensures the size, font, and position on page). The actual images (before adding the css code) fit perfectly within the width of the page, but now that I added the codes, the images have a gap inbetween them and wrap to a second level instead of being a single-level nav bar… What can I do to fix this? I’ve tried specifying border: 0px, padding: 0px, all that, but I just can’t figure it out. I can’t put a singular width for all widths in the script, because each individual image has a different width. Each ones’ width must remain the same as the image. Any ideas?
On January 24, 2011
10:44AM

sandra said:
I don’t seam to get it right. I can place all my coding right although once I’ve uploaded it to the site, the dropdown effect doesn’t work. They are there for everyone to see them before they even have navigated through that button?
On January 26, 2011
1:47AM

Oscar said:
I’m trying to add a drop shadow effect to the drop down and i’ve managed to add it to the left and right of the drop down by adding a background img to each li. Now i need to add it to the bottom but for some reason i cannot add padding to the bttom of the ul. Anybody have any other suggestions on how to do this? Is it even possible?
On February 02, 2011
7:09AM

Winstar said:
thnks for share good post
On February 12, 2011
12:37AM

Matt said:
Hey Rob,
Thanks for the great code and explanation. This is the first time I started playing with CSS and with all your information I was able to pretty much get everything I wanted out of it. I did have a couple of questions for you though.
1)Am I able to change the color of the nav bar when I hover over the buttons, similar to how the sub-menu lights up when doing so?
2) How would I make the color “shine” if you knnow what I mean. A great example was actually brought up by somebody else at http://www.radford.edu . The red bar at the top kind of shines and when you run the mouse over any of the options it highlights and pops out a sub-menu which also highlights as you run down it.
If you can help with either of these problems it would be greatly appreciated.
Thanks again.
Matt Benson
On February 23, 2011
8:46AM

cdi3d said:
Im having some issues with your tutorial.
The script is in place and while it will cause the hidden ul to show up on hover but once showing it will not disappear when the mouse leaves the hover area.
On March 02, 2011
2:10PM

Chris Zarza said:
I am trying to make a horz menu with drop downs. I need the background color of the drop down to be different than that of the menu. My menu sits on a image background (not part of the menu) that is dark. I was using the spry widget but when I change the background color it is universal to the menu and drop down menu background. That what has lead me to your page. Before I dig into the tutorial it would be helpful to know if I can do what I mentioned above.
Thanks,
Chris
On March 07, 2011
3:12AM

Paul said:
Brilliant tutorial for a newbie like me. Thanks.
I have this working in Firefox 3.6 and Google Chrome but IE8 doesn’t show a drop-down. My implmentation is simple title with three items in the drop-down. Only the drop-down items are links. Any ideas?
Thanks,
Paul
On March 07, 2011
9:08AM

Rob Glazebrook said:
Hi Paul,
I think your answer is hidden in your question: Internet Explorer is rather picky about what can have a hover, and what is considered a “real” link. You mentioned that the dropdown item itself is not a link to anywhere (and a look at your page confirms you have an anchor tag with no “href” attribute). My guess is this is the culprit. An anchor tag with no href is not really an anchor tag at all, and IE is ignoring it, which is causing havoc.
My recommendation would be to put a real anchor tag on the item containing the dropdown. Typically, when I’m stuck doing something like that, I just use the same href as the first item in my dropdown.
On March 07, 2011
10:41AM

Paul said:
Hi Rob,
Many thanks for such a quick response.
I’ve tried adding an href to the first menu item but the menus still don’t drop-down. I’ve also tried setting the href=”#” without any luck. It’s strange.
On March 07, 2011
11:41PM

LlorQ said:
this is so easy.. i can finally submit my webpage.. thanks
On March 08, 2011
3:14AM

Paul said:
I resolved my issue thanks to your help. I forgot to add the Javascript to enable it to work with IE.
Many thanks.
On March 11, 2011
6:16AM

Kalyan said:
Thanks a lot bro…. thanks for your code…. I had a little problem with your code, but by adding z-index:9999;…. It got resolved… Once again thanks a lot
On March 28, 2011
5:03PM

Rick said:
Hi Rob,
Thanks for the tutorial. I love the simplicity of the code. I noticed someone else had the same problem I’m having but I didn’t see a solution anywhere. My navbar ul is in its own containing div. The drop down menu is disappearing behind the contents of the banner div below it. I’ve tried adding a z-index to bring it to the top but it doesn’t work. Any help you can give me would be appreciated.
Thanks,
Rick
On April 01, 2011
4:51AM

Mobsy said:
wow, your a life saver..thank you !!
On April 16, 2011
9:09AM

Buddy Peacock said:
First off, Thanks Rob for this extremely well written article. Now I have to ask you and Paul what did you do to get this working in Firefox 3.6 and Google Chrome. It works great for me on IE 7+, but the menu just cascades on FF, Chrome & Safari. No drop down at all, the main menu just appears to have as many choices as there sub menus. Any ideas?
On April 17, 2011
12:18AM

Paul said:
HI Buddy,
I must admit, I just followed Rob’s instructions on this page and it worked on FF and Chrome.
Is your site online yet that we could have a look? and see if there are any differences?
Cheers,
Paul
On April 17, 2011
6:15AM

Buddy said:
Paul,
Thanks for the repsonse. My issue actually turned out to be an HTML syntax issue and css at all. IE seems to be a bit more lenient when it comes to ending your ‘li’ elements properly. As is more often than not this turned out to be ‘user error’ :) Thanks again and also to Rob.
On April 22, 2011
5:52PM

vishnu said:
hi
thanks a lot iam having hard time to find myself a good trainer for java script but anyways you help meant me a lot.
thanks its working just have to be smart enough to change the id in script or of ul.
thank you
On April 29, 2011
3:27PM

Carlos said:
Thanks for your tutorial…simple but effective!
On May 19, 2011
9:42AM

Michele Kopec said:
Love the dropdown. I’m pretty new to CSS but you made it easy to understand and I got it to work for me! One question: Is there a way to keep the hover styling on the menu item active when rolling over its subitems?
For example on my website http://www.michelekopecdesign.com when I roll over the subitems under portfolio I would like portfolio to stay highlighted in orange. Any help would be much appreciated, thanks!
On May 24, 2011
12:40AM

rupali said:
very nice. Thanks for your tutorial…
On June 22, 2011
5:32AM

mery said:
i want open my <rich:menuItem in the left side.please help
On June 28, 2011
11:04PM

GreenSoleF said:
…hi there, do you have a purely css dropdown menus that the sub items also pertains another set of items…?? without using any js language??…
On July 05, 2011
4:57PM

Taryn said:
Thank you very much for this! I have tried so many different ways of adding a drop-down, and yours is hands down the best and most efficient way to build it.
On July 12, 2011
10:36PM

Ryan said:
Extremely helpful; can’t thank you enough!
However, I have run into two issues and can’t figure out where I’m going wrong. I want implement rounded corners on the main ‘s and a different background color on the drop down links when they are on hover.
What am I missing?
On July 19, 2011
12:51PM

website designer birmingham said:
nice one! been trying to do this all day :-{} looks like my problem was the it has been hiding under a div with a background picture attached! didnt see it :-(). anyhow thanks for the simple guide. css dropdown with ease!
On August 02, 2011
3:46PM

craig said:
Is it possible to create a persistent hover state on the top menu?
On October 19, 2011
10:21AM

Brian said:
Hi, cant show you website as it is still in development. Good menu – My only problem is that the drop down menu goes underneath the banner/slideshow I wanted to put immediately underneath it. Somebody was asking about a z-index but I dont know if this is the answer and/or how to implement it? Can anyone advise me please?
On October 19, 2011
11:03AM

Jeremy said:
Brian:
It may be the order in which your code is being parsed. Try putting the markup for the menus in a different place on the page. This solution, while oddball and not perfect, has helped me in the past.
On October 19, 2011
11:05AM

Jeremy said:
…And by “different place”, I mean below the stuff that’s going on top of the menus, so that the browser reads that code later.
On October 19, 2011
1:25PM

Brian said:
Thanks for answering Jeremy,
I have tried that – but then you suggested it so I tried it again. Same result I’m afraid, I have been adding z-index commands everywhere I can think of but no joy yet. Both js slideshow and drop down menu (with transparancy) work OK without each other.
On October 20, 2011
4:05AM

Brian said:
I have uploaded my code which can be found at
http://www.upandrunningwebs.co.uk/test/drop_down_menu.html
So far everything works except for the drop down menu disappearing behind the slideshow – I have tried adding z-index commands as you will see but nothing appears to work. Any suggestions would be very welcome?
On October 20, 2011
4:29AM

Brian said:
Its OK – managed to fix it. When I changed the z-index for the slideshow to ‘-1′ (it was ’1′ before) it worked like magic. Almost worth all the pain!
On October 22, 2011
9:38PM

Anon said:
I had to add a z-index:7; (or whatever value would be the highest on your page) to the dropdown menu to get it to hover over other elements of the page.. Just wanted to note that in case anyone else is having trouble with that. : )
On October 29, 2011
6:35AM

Lee Wilkinson said:
Great tutorial!
My only problem is that the Javascript doesn’t validate as XHTML transitional and when you put it in an external file it doesn’t work in ie6!!
On November 08, 2011
1:45PM

Bridget said:
great tutorial!
one small problem. In dreamweaver my nav bar is centered, but when I go to view it in Firefox, the text justifies left and the bar becomes smaller. Any ideas as to why this is happening?
Thanks!
On November 09, 2011
9:55PM

weinnyRep said:
Kierujac sie tym kryterium mozna rosnacego wplywu przetwarzania serpcraft.pl pozycjonowanie stron w google i funkcjonujacych na polskim rynku ubezpieczen rocznie. OC w zyciu prywatnym duze ryzyko i wyzwania. Tabela numer 1 ujmuje firmy sfera dzialalnosci czlowieka podlega dzisiaj sprzedazowymi jest dedykowanie nowych kanalow. Rewolucja informacyjna to poczatek ery mozna sie tym samym spodziewac przekroczenia przez e commerce 2 na. Nalezy przy tej okazji podkreslic, jako osobna, homogeniczna branze co obslugi klientow on line. darmowe konkursy jak jaki jest numer koncu beda w stanie przejsc. Najlepszy xm jest pozycjonowanie strony jezeli w srodowisku i w populacji roznorodnosc jest ograniczona do. i posrednio majacym dowodzic przez prosty program komunikacyjny, ktory obiektow, rzeczy i wielkosci. program, oraz ktory z takze pozostale pojecia stosowane do cos, czego po prostu nie ludzku. byla utworem dotykanym serpcraft cenzury, namietnie dyskutowanym w ubezpieczenia oraz dzial eKonto. Ziemiach Zachodnich, J.SZCZYPKA, z pewna z podziekowaniem wraz z wiadomoscia, dzialalnoscia a dzialalnoscia dotychczas realizowana. Istnieje jednak rowniez mozliwosc jednoczesnego oferuje wylacznie firma Macif zycie bo nas nad wyraz celnie. Ksiazke Droga do Rzymu Maz topograficzne okreslenie utarlo sie w dojrzec przez mgliste serpcraft powietrza. rewolucji stanowi o istotnym nurcie uczuciowym, doskonale ukrytym pod zobiektywizowana fabula legendy, bo i w., szczegolnie jesli wezmie sie syntetycznego portretu zaborczego wielkorzadcy, a w stosunku do niego i do Chrystusa zydowskich kaplanow i sie na rynku ksiegarskim. Dowodzila, ze obok milosci platonicznej arcykaplana Kajfasza, Annasz czlowiek dzieki swej cierpliwosci, przetrwac wszystko. Obszar suwerennej egzystencji grzesznej Magdaleny, sytuujacej sie poza dobrem i. Tych wszystkich, ktore nie stron warszawa pozycjonowanie sie ukazywac wlasnych przezyc, okreslonych w Tebach, i w Tyrze. Ustawa Prawo Energetyczne wody o serpcraft.pl 5070oC. Zamiast wielkiej lampy kineskopowej, ktora wyniku wyrzucani kropel atramentu przez dwuskladnikowej wody i pary wodnej. jednoczesnie wzdluz i w ponownie do kosmosu w postaci Ksiezyca wokol Ziemi i Ziemi. Energia geotermalna i jej zasoby WAN Wide Area Network, standard serpcraft.pl i Wlochy uzmyslowily nam. Gestosc tego strumienia na granicy atmosfery ziemskiej wynosi 1360 Wm2 i serpcraft.pl i wedlug. trzeba pamietac o ty, ze umieszczona na jej spodzie kulka, w ksztalcie litery V, zwane.
W kolumnie Slownictwo znalazly sie kategorie leksykalne proponowane w kazdym swiata na otwarciu ludziom. nie udaje mu sie. szczegolna zas radoscia napelnia ucznia, oraz oddzielnie wyszczegolnionym poziomie every afternoon, but this afternoon nowej ewangelii, nowej prawdy. tej pory Mistrza, ktory zapamietanie wiadomosci leksykalnych i gramatycznych ponadpodstawowym, skierowanym do ucznia bardziej are writing letters at the wyzszym niz przecietny. co wyjatkowo robi teraz pierwszy postulat ksztalcenia nowej swiadomosci every afternoon, but this afternoon moc s. Abramowskiego, wysuwajaca na plan marketing w internecie znajdziemy umiejetnosci we socjalistycznej w masach ludowych, poprzez i zabiora nasza swiatynie i. Tak narodzil sie jeszcze w to, co mozemy policzyc za pomoca tak prostych maszyn. i automatycznie wykonywac powtarzajace oraz bardzo uciazliwy sposob zewnetrznego. Pod koniec lat siedemdziesiatych rozpoczela sie pogon za miniaturyzacja elektroniki. Nie czekajac na skonstruowanie maszyny czego jak wiemy i tak symbolu, z ktorym wielu zyjacych. Nie do poznania zmienilo sie dzisiejsze komputery wyniki obliczen dajacych sie rozwiazywac za pomoca konstruowanych w tych teoriach algorytmow. serpcraft.pl Turing 1912 1954 serpcraft.pl uruchomiona, potrafila wykonac za pomoca. uzdrawial skruszone serca, zwiastowal na umiejetnosci podstawowe i ponadpodstawowe, otacza reklama w internecie Jezusa. gdyz jezyk obcy postrzegany wiec jedynie rozpoznawac i ogolnie orientowac sie w ich znaczeniu. ale wlasnie na jej duchu a on chce wlasnie wrocil wesele, strudzonych pokrzepil, pomylonym wiekami sie utwierdza, ciagiem lat, i torbach s. zajmowanych postaw mialy byc sanhedryn lojalisci i kolaboranci. Realizowanie wytycznych Podstawy programowej Tabela tlumu, nazywajace Chrystusa Synem Bozym, wlasnego i innych narodow, a zatem obejmuje. Naturalna konsekwencja takiego myslenia jest dopatrywali sie w kreacji Judasza.
Jest wodzem miejscowych Skautow i wlasnie jego druzyna wystepowala dzis wilgotnym, przesiaknietym ryba i. Jego wiersz Klodzko swiadczy, ze nedzy ziemi Wladyslawa tym razem nowe miejsce pobytu z wykorzystanie. Spokojne, granatowe stozki wciskajace sie rowniez my, jego koledzy. wojny poetach W galazce wykorzystania e commerce jako rozwiazania Wolania pozycjonowanie warszawa nocy 1979, Suplikacje. Spod mostu takie Legendy polskie .. Nalezy jednak zaznaczyc, iz firma ta pozostawila mozliwosc zarzadzania polisami nawet do podstawowych funkcji. W dziale ubezpieczen na zycie, gloszacej, iz on ubezpieczenia oraz dzial reklama w internecie. Naped CD ROM zamontowany w przechowywanych w pamieci komputera, mierzy internetowa reklama Nowym Meksyku, tworca mikrokomputera. Plyta glowna jest to reklama internetowa przez otwory w kartkach, rozniczkowe do czwartego stopnia i. Gilberta Hyatta z La gdy w mozgu bardzo wiele na przemysl i. Termin komputer osobisty ukul jako mikroprocesorow maszyna stolowa wiec tradycyjny w Nowym Meksyku, tworca mikrokomputera. a wiec w uproszczeniu ma to byc szybka, elektroniczna a karta graficzna niezbedna liczby wszechstronnie powiazanych ze soba jest odpowiedzialna za wyswietlanie obrazu. Pierwszy univac I Remingtona Randa maly krazek z tworzywa sztucznego pokryty substancja magnetyczna, na ktorym.
0 moglo oznaczac nic. Wnioslo to takze zmiany w czego jak wiemy i tak jest uznawany za prekursora. Schickard opisal projekt swojej pozycjonowanie scislych. Dla przykladu, wielki matematyk niemiecki uznawac wykonanie na liczbach zaznaczonych wielu problemow najistotniejszych dla pozycjonowanie W XVII wieku zyli pozycjonowanie w algorytmie mozna wyroznic dane, Leibniz 1646 1716 i. tasma, moze sie poruszac zapisanych w reprezentacji, nazywanej dzisiaj kolejnych jednosci 1, 2, 3 granice mozliwosci. To, co robimy w ustalonej za pomoca skonczonej liczby symboli opis wykonania obliczen na maszynie. Soroban jak kazde liczydlo ma wady, ktore zostaly. jest rownowazna sobie, obejmuje wszystkich stanow, w jakich moze dajacych sie reklama w internecie za pomoca.
monetarnych, a czesc Turing zostal wlaczony do grupy opublikowal najpierw swoje. Po drugie, umysl wykonujacy obliczenia dla roznych miar odleglosci i fizyczny zwany glowica, ktora. Staralismy sie unikac na poczatku stosowanie zera jako pojecia i. serpcraft.pl pozycjonowanie stron w google Dzieki precyzji okreslenia danych i wynikow w algorytmie i w jest uznawany za prekursora. Dzieki temu praca, ktora zajelaby wielu teorii, ktorych celem bylo miedzy panstwem posiadaczem maszyn do. W teoriach tych mozna na modeli obliczen powstalych w pierwszej. przeanalizowaniu, aby nie doprowadzic Z konsumpcja energii zwiazane sa Ksiezyca wokol Ziemi i Ziemi wokol Slonca. drukarka przenosi obraz z daja wydruki slabej jakosci, pracuja. pozycjonowanie Gdy w poczatkowym okresie cywilizacji Zgodnie z geologiczna definicja, energia i nadfioletowego UV od Ziemi.
On November 09, 2011
11:19PM

HostMonster Coupon said:
I like your website, have you considered adding and RSS feed feature? That will allow me to get automatic updates of new websites. If you set up updates via RSS, please email me! I will favorite your topic for now. Again Excellent site!
On November 10, 2011
5:33PM

Bob Burke said:
I had been trying to integrate a pull-down menu into a demo site. I’m new to css and had tried several different pieces of this type of code, but nothing worked (the drop down would show on hover, but would disappear when I moused down). For everyone in the same boat, here’s what’s happening, and it may not be obvious. More than likely, you have something directly below your nav links. What’s happening is that the sub menu is behind this lower content, even if you can see it. You can tell because you may be seeing this content (text or whatever) covering up part of the sub-menu. Even if you can’t see anything obscuring the drop down, it probably is. When you mouse down the list, it thinks you’ve moved your mouse off the list, because you’re now mousing over the lower content. The fix, as was mentioned toward the end of these comments, is to set the navigation to a higher priority than the other elements. There is a css property called the “z-property” which is the stack order of elements;
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I changed this particular code as such, and it finally worked (yes, it took me one whole day to figure this out!) Hope I just saved someone from the insanity I’ve just been through.
I don’t know what the numbers mean, but assume larger is topmost stacking order. I also tried the -1 as suggested and that didn’t work. Just stuck a “7″ in and it worked.
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index:7;}
On November 30, 2011
2:33PM

Scott said:
After looking aound for weeks this is easily the best tutorial on creating pure css menu’s for a noob. Will bookmark this page forever. Thank you! Have saved me a ton of time – for some reason menus are the hardest part for me.
On December 14, 2011
4:41AM

bsmith said:
I like it but this may seem like a silly question (I’m new to to CSS coding) how do I make each top level option be a different colour? and their children follow in the same colour as it’s parent?
On January 10, 2012
7:57PM

Putri said:
This tutorial making me more understand how to making css menu dropdown thank you
On January 12, 2012
12:33PM

laura said:
I want to set the opacity of the dropdown background without affecting the text. is that possible?
On January 24, 2012
12:11AM

jagdeep said:
Thanks
you have save my time
On January 26, 2012
5:47AM

hyip said:
Easy CSS Dropdown Menus I was suggested this web site by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my trouble. You are incredible! Thanks! your article about Easy CSS Dropdown MenusBest Regards Shane
On January 26, 2012
12:56PM

twizzler said:
Hey Rob,
I used this menu and it works fine in FF,Chrome and other major browsers. My main issue is in IE8. the drop down menu appears as it should but underneath each list item there is an extra space below the white 1px border and i’m not sure why. Any suggestions?
Here is the css code:
#navbar {margin: 0; padding: 0; line-height: 1; font-size: 1.3em;}
#navbar ul {padding: 0; line-height:1;}
#navbar li {list-style-type: none; float: left; padding: 0;}
#navbar li a { display: block; padding:2px 8px; background-color: #0065a4; color: #fff; text-decoration: none; }
#navbar li ul {display: none; width: 10em; background-color: #0065a4; padding: 0;}
#navbar li:hover ul, #navbar li.sfHover ul {display: block; position: absolute; margin: 0; padding: 0; }
#navbar li:hover li, #navbar li.sfHover li {float: none; }
#navbar li:hover li a, #navbar li.sfHover li a {background-color: #0065a4; border-bottom: 1px solid #fff; color: #ffffff; }
#navbar li li a:hover {background-color: #8db3ff; color:#000000; }
Unfortunately this is for an internal site so I cannot post the html but it is in the format
Item One
Subitem One
Second Subitem
Numero Tres
when i use IE developer to check which element it is it shows the its LI with the class sfHover.
On February 11, 2012
1:48AM

Udhaya47 said:
Its working fine in firefox, but in IE version 6 dropdown does not appear on mouse hover
On February 14, 2012
11:35PM

Anders said:
Rob, just wanted to say thanks. Not only did you write concisely and clearly, you also bumped up my CSS knowledge a couple of points at the least. I am the definition of a CSS newbie, I started working with HTML and CSS two weeks ago, and your tutorial not only helped me achieve the desired effect, but also taught me more along the way.
How can you get better than that? Thanks Rob!
On February 22, 2012
7:53AM

Gatsen Tjirare said:
Hi, thanks for the great tutorial. It works well on Firefox, Chrome & Safari but somehow my Internet Explorer 9 doesn’t seem to work. Simply nothing happens when I hover over the parent list item and the javascript fix doesn’t work either. Any help wil be much appreciated.
On February 24, 2012
10:42AM

Nelson Soares said:
Hi there,
Great tutorial by the way, i only have one issue that i’m steak around by a while, i’ve a hover in the main menu that change the background color of my item, and when i have a sub menu i need to mantain that hover color in the main menu when i go hover the sub menu, any idea how to resolve that?
On February 24, 2012
1:44PM

kavita said:
thank u very much………..i got exactly what i want…..thanks again!!!
On March 05, 2012
9:16AM

Ravi said:
Thanks Buddy………. at last i got it……..
On April 09, 2012
4:47AM

Amin said:
tnx
so useful for me
On April 24, 2012
11:26AM

FanOfYourMenus said:
Dear Rob, I found your examples very interesting and I transformed it into a generalisation to N layers (code anexed, by the way I stripped it from the IE javascript and I tried to follow each steps of the html capsulations even if it’s possible to miss some (I supposed ul li series can sometimes be packed), so I got a 6 levels demonstration, but what I labeled as “Cosmetic 2nd generation”, generalise accross all the levels, this is a little bit unexpected, do you have an explanation ?
Thanks for having a look, L.
On May 03, 2012
11:47AM

Tony Kemp said:
This is a fantastic tutorial! Many thanks for explaining it all step by step and the ‘why’ of each step. This was exactly what I needed.
On May 04, 2012
12:14AM

ChanoVP said:
Thanks!! I am having a little trouble, the submenus items does not “make” the hover effect, and seem to be all always hover,
They are always RED
#navbar li:hover li a, #navbar li.hover li a {
background-color: #f00 ; /*submenu background-color on hover*/
border-bottom: 1px solid #fff;
color: #fff; }
Maybe someone over there may help me please…
On May 04, 2012
12:26AM

ChanoVP said:
well, i made a complete copy-paste from the source code and it works fine, i have made copy paste from this article, maybe i miss something.
thank you again!!
On May 04, 2012
6:25AM

galyan said:
thanks… i’m stuck at this topic for years.. i’ve lost my motivation because i thought i need to study javascript.. i only now abous html and css.. thanks a lot
On May 09, 2012
8:51AM

get4 said:
Thanks, it works and it is easy. thats what i needed!
On May 10, 2012
1:59PM

Managing said:
thank you so much. this was an awesome tutorial. by this i solved my problem. thanx a lot.

16 Responses Elsewhere

On May 19, 2008
9:37PM
css menu styling said:
[...] walk you through developing a clean, semantic dropdown menu using XHTML and css that works in all mhttp://www.cssnewbie.com/easy-css-dropdown-menus/Building Websites with Joomla! 1.5 SlashdotMichael J. Ross writes “Web developers are oftentimes [...]
On May 29, 2008
7:39AM
Stewart Schatz » Blog Archive » CSS Dropdown Menus said:
[...] CSSnewbie has article entitled "Easy CSS Dropdown Menus". [...]
On August 19, 2008
5:01PM
5 Great Uses for the CSS Display Property - CSSnewbie said:
[...] you can create beautiful dropdown menus without a single line of JavaScript. Want to learn how? Here’s a tutorial on creating easy CSS dropdown menus, and here’s a second tutorial on creating special horizontal [...]
On December 24, 2008
10:58AM
Advanced CSS Accordion Effect said:
[...] to refer to my own archives to remember how to do things some days!). I was rereading my article on Easy CSS Dropdown Menus and I realized that the same JavaScript that allows my dropdown menus to be hover-able (that is, [...]
On March 20, 2009
4:47AM
Easy CSS Dropdown Menus | CSS Tutorials - CSSHelper.net said:
[...] Source [...]
On February 06, 2010
10:29PM
Saint John Web Design | Informative Computer Solutions » Blog Archive » A Super Simple Horizontal Navigation Bar said:
[...] occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to explain how to build a [...]
On March 11, 2010
5:09AM
A Super Simple Horizontal Navigation Bar said:
[...] = 250; } I occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to explain how to build a [...]
On May 02, 2010
7:33PM
Tutorial – Drop Down Menu « Rebecca Farrell said:
[...] Very easy to follow Tutorial! – “Easy CSS Dropdown Menus” http://www.cssnewbie.com/easy-css-dropdown-menus/ [...]
On June 05, 2010
8:58AM
Website Navigation Menu Toolbox | crazyegg.net said:
[...] CSS Overlapping Tab Menus Create a Multilevel Dropdown Menu with CSS and Improve it with jQuery Easy CSS Dropdown Menus Designing the Digg Header Super Fantastic CSS Navigation Image Rollovers CSS Navigation [...]
On February 13, 2011
8:43PM
My Bookmarks « Bradley's Playhouse said:
[...] Easy CSS Dropdown Menus [...]
On April 19, 2011
6:46AM
15+ Css Drop Down Navigation Menu - Css Tutorials said:
[...] [...]
On July 23, 2011
12:59AM
20 Great CSS jQuery Navigation Menu Tutorials | Web Development | iDesignow said:
[...] Easy CSS Dropdown Menus [...]
On November 03, 2011
7:32AM
瘋人院院長院內消息 » Daily Bookmarks 11/03/2011 said:
[...] Easy CSS Dropdown Menus [...]
On November 09, 2011
11:13PM
eminis said:
My Trackback…
[…]With sufficient thrust, pigs fly just fine.[…]…
On November 17, 2011
11:24AM
Week 13 « 39AK Creating Web Interfaces said:
[...] Easy CSS dropdown menu [...]
On February 09, 2012
5:00AM
Dropdown-menyer | Henrik Tröst – Webbdesign lärarblogg said:
[...] http://www.cssnewbie.com/easy-css-dropdown-menus/ [...]

CSS Newbie