Heeeelp please! stoping hover on current page

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;

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

Thanks any help appreciated

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 {


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 {

Also assuming that #ccc is the link background color.


Tommy beat me :slight_smile:

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