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