Making main navigation element not change to nested li color on mouseover

HTML & CSS
1

I have a drop down menu that when you mouseover the main navigation everything goes as expected in terms of the images switching for normal and mouseover, however I notice that as I mouseover the nested li items whichever main category that the nested li items belong to also takes on the background color of the nested li items instead of remaining the same hover color that it originally was. Is it possible to prevent this? I would like the main navbar have its background colors independent of the drop menu colors.

* {
margin: 0;
padding: 0;
}
body {
background: transparent url('sample_bg.png') repeat-x 0 0;
}
#bodywrapper {
margin: 37px auto 0;
max-width: 960px;
min-width: 600px;
padding: 10px;
background: #fdfdfd;
}
* html #pagewrapper {
width: 960px;
}
#header {
margin: 0 0 4px;
height: 100px;
background: #ccc;
}
/* topmost navlink styles */
#nav {
margin: 0 auto;
width: 960px;
height: 40px;
font: bold 13px/1.2 Arial;
 
}
 
#nav ul li {
    float: left;
    width: 120px;
    list-style: none;
}
#nav ul li a {
    display: block;
    visibility: visible;
    /*border: 1px solid #999;*/
    padding-top: 12px;
    height: 28px;
    background: url("nav_image.png") repeat-x -81px 100%;
    color: #ddd;
    text-decoration: none;
     text-align: center;
}
#nav ul li a:hover {
    background:url('nav_image.png') repeat-x -40px 0%;
}
/*----- Begin Second Level ----- */
#nav ul,
#nav ul ul li{
    position: relative;
    margin: 0;
    padding: 0;
}
#nav ul li ul {
    position: absolute;
    left: -999em;
    top: 40px;
 
    height: 40px;
}
#nav ul li:hover ul ul,
#nav ul li.sfhover ul ul {
    left: -999em;
}
#nav ul li:hover ul,
#nav ul li.sfhover ul,
#nav ul ul li:hover ul,
#nav ul ul li.sfhover ul {
    left: auto;
}
#nav ul ul.subhor-1item li {
    width: 120px;
}
#nav ul ul.subhor-2items li {
    width: 240px;
}
#nav ul ul.subhor-3items li {
    width: 160px;
}
#nav ul ul.subhor-4items li {
    width: 120px;
}
#nav ul ul ul li {
    clear: left;
}
/****** Link Styling ******/
#nav ul li:hover a,
#nav ul li.sfhover a,
#nav ul li a:hover {
    background:#777;
    color: #eee;
}
#nav ul li a:hover {
        background: url('nav_image.png') repeat-x -40px 0%;
}
#nav ul li ul li a:hover {
    background: url('subver_bg.png');
    color: #fff;
}
#contentwrapper {
margin-top: 5px;
height: 750px;
background: #e3e3e2;
}

When I edit the style for

#nav ul li:hover a,
#nav ul li.sfhover a,
#nav ul li a:hover {
background:#777;
color: #eee;
}

then all the lower levels take on the background color of the main navigation. When in reality I would like to make them separate.

2

Just define styles for the lower levels :slight_smile:

#nav ul[b] li[/b] li:hover a,
#nav ul [b]li[/b] li.sfhover a,
#nav ul li [b]li[/b] a:hover {
background:#777;
color: #eee;
}
3

In the “first-level” section, you have this:
#nav ul li a:hover {
background:url(‘nav_image.png’) repeat-x -40px 0%;
}

In the “link-styling” section, you have this:
#nav ul li a:hover {
background: url(‘nav_image.png’) repeat-x -40px 0%;
}

The trick to writing CSS for dropdowns is to reduce the amount of extra code as much as possible.

When setting background colours on hovers, you need to be careful when mixing li’s and a’s.

I see this:
#nav ul li:hover a,
#nav ul li.sfhover a,
#nav ul li a:hover {
background:#777;
color: #eee;
}
And notice the same colours are being hit for hovering li’s and hovering a’s.

So even if you later write new styles for sub-subs li’s, you still have the old anchor styling, or vice versa. Choose one element to get mouseover styles. If your anchors are blocks (and in your case they are) then have the anchors carry all the styles.


#nav ul li a:hover {
        background: url('nav_image.png') repeat-x -40px 0%;
}
#nav ul li ul li a:hover {
    background: url('subver_bg.png');
    color: #fff;
}

If you are going to set a background using shorthand for an anchor, then when overriding it with the background of a sub-anchor, you either need to be specific (“background-image: url(subver_bg.png);”) or re-state the other stuff (“background: url(subver_bg.png) no-repeat 0 0;”)
(I just made up values for the others, I don’t know what the image really needs).

sub-sub anchor isn’t being given a new bg colour, so it makes sense that it’s getting old bg colour, and esp since you say
“all li’s who are decendants of #nav ul and are hovered, get this background colour”
and don’t later make a new rule for sub-sub li’s.

One way to reduce code complexity is to remove the nav wrapper. It it’s not being used as a necessary styling hook (and I don’t see that it is) then you don’t need it.

<div id=“nav”>
<ul>
<li>anchor here…</li>
…</ul>
</div>

Instead of that, just
<ul id=“nav”>
<li>anchor here…</li>
</ul>

because then your CSS gets easier to write:

/* topmost navlink styles */
#nav {
margin: 0 auto;
width: 960px;
height: 40px;
font: bold 13px/1.2 Arial;

}

#nav li {
float: left;
width: 120px;
list-style: none;
}

#nav ul will always mean a sub-ul. #nav will always mean the menu itself, which is the main ul.

Then, don’t forget those who do not or cannot mouse:

#nav a:focus, #nav a:hover {
color: #eee;
background: #777 url(‘nav_image.png’) repeat-x -40px 0%;
}

And sub-anchors are now
#nav ul a:focus, #nav ul a:hover {
color: #fff;
background-image: url(‘subver_bg.png’);
}

And no li:hover issues here.

(that last statement may inherit the repeat-x and coords from earlier… I didn’t check but when coding I don’t leave it up to guessing… if I don’t want those properties on the sub-anchor I explicitly code them out)

Does that help?

4

I see what your saying I will give this a rework and see how it goes. Thanks for the suggestions as to what is causing my problems.