CSS - diff background img for each menu item
Posted: Wed Apr 05, 2006 12:40 pm
I often run into the problem of needing a different background image for each of my menu items (say I want to have an icon of home on the home page link, an envelope on the contact us page, etc.). I usually write a different css class for each of the menu links like this:
Is there an easier/shorter way to do this?
Code: Select all
#left_menu ul li a.home{
background: #ccc url(images/home.jpg) no-repeat;
color: #000;
}
#left_menu ul li a.home:hover{
background: #ccc url(images/home.jpg) no-repeat;
background-color: #fff;
}
#left_menu ul li a.contact{
background: #ccc url(images/contact.jpg) no-repeat;
color: #000;
}
#left_menu ul li a.contact:hover{
background: #ccc url(images/contact.jpg) no-repeat;
background-color: #fff;
}
#left_menu ul li a.page1{
background: #ccc url(images/page1.jpg) no-repeat;
color: #000;
}
#left_menu ul li a.page1:hover{
background: #ccc url(images/page1.jpg) no-repeat;
background-color: #fff;
}