Re: li background inheritance problem

[ikthius]

"baldguy" wrote:

I am trying to style a menu, where the active page link has a solid color bar behind it. It needs to stretch the entire width of the containing div, so I am applying it to the li element. The problem is that the li element has a class of "active", but that class is then inherited by the nested list below it, and the bar shows up on all the nested li elements.

It works correctly if I close the li before starting the nested list, but as I understand that’s not semantically correct. I want it to be correct, so my question is – is there a way I can target that one element without having the nested list pick up the styles?

Here’s my relevant css:

Code:

ul, li { /* reset */
margin:0;
padding:0;
}

#menu {
width: 230px;
background: #efefef;
}

#menu ul {list-style-type: none;}

#menu li{
padding-left: 1em;
}

#menu li.active {
background: yellow;
}

#menu li a {
color: orange;
}

#menu li a.active {
background: url(arrow.png) no-repeat left center;
padding: 1.25em;
}
}

And my html:

Code:

• Item 1
• item 2
  • Nested Item 1
  • Nested Item 2

(arrow.png is a 9×9 graphic, if that helps)

Any help on this would be greatly appreciated. It’s probably an easy fix, but it’s just not coming to me!

Thanks!!

not seen what you mean, but trying to decode your text, I would say your no-repeat is your problem, repeat it horizontally the x value