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

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

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.

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

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!

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