tags:

views:

25

answers:

1

This seems simple enough, but I can't get the background color of my list items in a sliding door menu in css to change. I've changed the left border (to green) and the text of each list item (to white), but I haven't been able to change the background color. Here's the code:

.slidedoormenu
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 180px; /* width of menu (don't forget to add border with below!) */
    border-left: 8px solid #007f00; /* thick left border of menu */     
}
.slidedoormenu li
{
    border-bottom: 1px solid #885b5c; /* Gray border beneath each menu item */
}
.slidedoormenu li a
{
    background: white url(media/vstrip.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
    font: bold 16px "Lucida Grande" , "Trebuchet MS" , Verdana;
    display: block;
    color: white;
    width: auto;
    border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */
    padding: 7px 0; /* Vertical (top/bottom) 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 387px, or the start of the 2nd background image */
}
.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a
{
    border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}
.slidedoormenu li.lastitem a
{
    padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}
A: 

Don't see why this shouldn't work.

.slidedoormenu li{
background-color:#3a8f07;
border-bottom: 1px solid #885b5c; /* Gray border beneath each menu item */}
Julian
I'm confused too. I'm not able to change the background color of the 'li'.
jmac
I think that I figured it out. The vstrip.gif is set to the pinkish color. I'll have to modify that.
jmac