Need to change Css from li:hover to a:hover

[vlane95678]

The script written in CSS has a hover feature in it. But the hover is written li:hover which doesn't work in IE 6. We have researched and what we found said to write it as a:hover. Can anyone help? Here is the hover part:

#nav-menu li a:hover#a0 {background: url(Lanitech_Artwork/button_home_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a1 {background: url(Lanitech_Artwork/button_about_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a2 {background: url(Lanitech_Artwork/button_subscribe_on_back.gif); background-repeat: no-repeat;}
#nav-menu li a:hover#a3 {background: url(Lanitech_Artwork/button_current_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a4 {background: url(Lanitech_Artwork/button_contribute_on_back.gif); background-repeat: no-repeat;}
#nav-menu li a:hover#a5 {background: url(Lanitech_Artwork/button_advertise_on_back.gif); background-repeat: no-repeat;}
#nav-menu li a:hover#a6 {background: url(Lanitech_Artwork/button_partners_on_back.gif); background-repeat: no-repeat;}
#nav-menu li a:hover#a7 {background: url(Lanitech_Artwork/button_contact2_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a8 {background: url(Lanitech_Artwork/menu_yearly_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a9 {background: url(Lanitech_Artwork/menu_single_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a10 {background: url(Lanitech_Artwork/menu_writers_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a11 {background: url(Lanitech_Artwork/menu_photo_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a12 {background: url(Lanitech_Artwork/menu_featured_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a13 {background: url(Lanitech_Artwork/button_advertise_on_back.gif); background-repeat: no-repeat;}
#nav-menu li a:hover#a14 {background: url(Lanitech_Artwork/menu_materials_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a15 {background: url(Lanitech_Artwork/menu_ads_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a16 {background: url(Lanitech_Artwork/menu_mechanicals_on.jpg); background-repeat: no-repeat;}
#nav-menu li a:hover#a17 {background: url(Lanitech_Artwork/menu_distribution_on.jpg); background-repeat: no-repeat;}

[Moshambi]

if you are just not getting the image to show I would try to place quotes around the file name...hope that helps.

[Snookerman]

#nav-menu li a:hover#a0

You cannot place the id value after the hover. Your code should look like this:


#nav-menu li a#a0:hover

[Moshambi]

Oh good catch snookerman I didn't even notice that

[Snookerman]

Thanks:o
I see the OP hasn't answered so I'll be more clear, try this code:


#nav-menu a {background-repeat:no-repeat;}
#nav-menu #a0:hover {background: url(Lanitech_Artwork/button_home_on.jpg);}
#nav-menu #a1:hover {background: url(Lanitech_Artwork/button_about_on.jpg);}
#nav-menu #a2:hover {background: url(Lanitech_Artwork/button_subscribe_on_back.gif);}
#nav-menu #a3:hover {background: url(Lanitech_Artwork/button_current_on.jpg);}
#nav-menu #a4:hover {background: url(Lanitech_Artwork/button_contribute_on_back.gif);}
#nav-menu #a5:hover {background: url(Lanitech_Artwork/button_advertise_on_back.gif);}
#nav-menu #a6:hover {background: url(Lanitech_Artwork/button_partners_on_back.gif);}
#nav-menu #a7:hover {background: url(Lanitech_Artwork/button_contact2_on.jpg);}
#nav-menu #a8:hover {background: url(Lanitech_Artwork/menu_yearly_on.jpg);}
#nav-menu #a9:hover {background: url(Lanitech_Artwork/menu_single_on.jpg);}
#nav-menu #a10:hover {background: url(Lanitech_Artwork/menu_writers_on.jpg);}
#nav-menu #a11:hover {background: url(Lanitech_Artwork/menu_photo_on.jpg);}
#nav-menu #a12:hover {background: url(Lanitech_Artwork/menu_featured_on.jpg);}
#nav-menu #a13:hover {background: url(Lanitech_Artwork/button_advertise_on_back.gif);}
#nav-menu #a14:hover {background: url(Lanitech_Artwork/menu_materials_on.jpg);}
#nav-menu #a15:hover {background: url(Lanitech_Artwork/menu_ads_on.jpg);}
#nav-menu #a16:hover {background: url(Lanitech_Artwork/menu_mechanicals_on.jpg);}
#nav-menu #a17:hover {background: url(Lanitech_Artwork/menu_distribution_on.jpg);}

As you can see, I simplified it a bit to make it easier to edit and quicker to parse by browsers.