How to make hover state of main nav item stays active whilst on drop down menu

[piccolodesign]

Hi,

A site I’m currently working on has a CSS drop down navigation (basic structure taken from http://csswizardry.com/ tutorial). The navigation works fine apart from one small detail – when you roll of the main link onto the drop down navigation the state reverts back to it’s original but I really want it to stay as the hover state until you either click a link or move onto another part of the navigation.

http://www.art-home-repairs.co.uk/testsite/restoration_cardington.html

I hope this all makes sense

Thanks
Gary

[JPC776]

Add the following to your css and I think it should work

#nav li:hover.speccoatings a {

background-image: url(../images/coatings_navmain_pattern.png);

color:#fc3;

}



#nav li:hover.restorations a {

text-decoration:none;

background-image: url(../images/rest_navmain_pattern.png);

color:#fc3;

}



#nav li:hover.specrepairs a {

text-decoration:none;

background-image: url(../images/repairs_navmain_pattern.png);

color:#fc3;

}

I am by no means an expert, but it worked for me when I tried it.

Hopefully this helps,
Jason

[piccolodesign]

That’s brilliant Jason!

Thanks so much for your help, you have no idea how much that has helped me out.

Gary

[Author]

Posts