I'm having trouble changing the background color of my list items in a sliding door menu using CSS. I've successfully changed the left border to green and the text to white, but the background color remains unchanged. Below is the code I'm using:
.slidedoormenu
{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* set menu width (remember to include border below!) */
border-left: 8px solid #007f00; /* thick left border for menu */
}
.slidedoormenu li
{
border-bottom: 1px solid #885b5c; /* Gray border below each menu item */
}
.slidedoormenu li a
{
background: white url(media/vstrip.gif) repeat-y left top; /* Background image positioned at top left initially */
font: bold 16px "Lucida Grande" , "Trebuchet MS" , Verdana;
display: block;
color: white;
width: auto;
border-bottom: 1px solid white; /* White border below each menu item link for depth */
padding: 7px 0; /* Vertical padding for each menu link */
text-indent: 8px;
text-decoration: none;
}
.slidedoormenu li a:visited, .slidedoormenu li a:active
{
color: white;
}
.slidedoormenu li a:hover
{
background-position: -387px 0; /* Shift background image horizontally by 387px */
}
.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a
{
border-bottom-width: 0; /* Remove bottom border for last menu item */
}
.slidedoormenu li.lastitem a
{
padding: 8px 0; /* Increase vertical padding of last menu link by 2px */
}