Heeeelp please! stoping hover on current page

HTML & CSS
1

Hi I hoped soemone could point me in the right direction for this.
Basically my template creates a unique id in it’s flat menu list so it can display a defferent BG for the current page

class=“mainlevelmainnav” id=“active_menumainnav”>Product Info</a></li>

I want to stop the hover effect working when the mouse rolls over the current page menu item.

This is my menu stylesheet

#mainlevelmainnav {
width: 100%;
float: left;
margin: 0 0 0em 0;
padding: 0;
list-style: none;
background-color: transparent;

}
#mainlevelmainnav li {
float: left; }
#mainlevelmainnav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: normal;
color: #036;
font-size:16px

}
#mainlevelmainnav li a:hover {
color: #000;
background-color: #fff;
text-decoration: underline;
}
a:hover#active_menumainnav {
background:#CCC}

Thanks any help appreciated

2

The syntax of the last selector is invalid – pseudo-classes must come last – and it is not specific enough to override the previous selector either.

Change the last rule to this,

#mainlevelmainnav a#active_mainmenunav:hover {
  background-color:#ccc;
}
3

Hi,

Assuming the id is added to the anchor that contains the current item then you would need to do something like this:


#mainlevelmainnav li a#active_menumainnav:hover {
    background:#CCC
}

Also assuming that #ccc is the link background color.

Edit:

Tommy beat me :slight_smile:

4

wow thanks for the quick reply i just spent an hour or so trying to work that out for myself…you rock