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:
1 2 3 4 5 6 7 8 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | #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:
1 2 3 4 | #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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | #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:
1 2 3 4 5 6 7 8 9 10 11 | #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!
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