li background inheritance problem

[baldguy]

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: Select all

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: Select all

<div id="menu">
<ul>
   <li><a href="#">Item 1</a></li>
   <li class="active"><a href="#" class="active">item 2</a>
      <ul>
         <li><a href="#">Nested Item 1</a></li>
         <li><a href="#">Nested Item 2</a></li>
      </ul>
   </li>
</ul>
</div>

(arrow.png is a 9x9 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!!

[Robskiwarrior]

Got an active link? would be easyer for us to firebug it...

You also have an extra "}" at the end of that bit of CSS - not going to solve this issue I doubt, but ya know lol

active link is much easyer for us...

[ikthius]

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: Select all

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: Select all

<div id="menu">
<ul>
   <li><a href="#">Item 1</a></li>
   <li class="active"><a href="#" class="active">item 2</a>
      <ul>
         <li><a href="#">Nested Item 1</a></li>
         <li><a href="#">Nested Item 2</a></li>
      </ul>
   </li>
</ul>
</div>

(arrow.png is a 9x9 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

[baldguy]

@robskiwarrior - I am developing this using CMS Made Simple on my localhost. I don't have a live link, but I mocked up a page that shows what I'm talking about:
http://www.spinninginfinity.net/testing/listtest.html

Yeah, the extra } - I took out another style that I added while attempting to resolve the problem and had a little leftover -whoops

@ikthius - the no-repeat is only on the graphic (arrow) that is the background for the "a" link. The li background is being inherited from one li to the nested li. The arrow is incidental to my problem - it could be removed if need be. If I can get this working, the active link will have a yellow background (from the li) and an arrow (from the a).

[Robskiwarrior]

Its not actually inheriting it at all, its doing exactly what you want it to do... that <li> background is yellow, its just that the li expands around the UL that holds the nested items

For example if you set the background of #menu ul li ul li {background:#eee} it will change the nested UL's LI's to the same #eee you are using for the main UL, and will no longer be by default transparent. Do you see? its not that they are picking up the colour, its that you can see through them onto the LI that has the colour yellow as the background. They are inside it so it picks it up.

A quick fix:


add the bold text

#menu li a.active {
background:yellow url(arrow.gif) no-repeat left center;
display:block;
padding: 0 1.25em;
}

delete or comment out this...

#menu li.active {
background: yellow;
}

Is that more what you are after?

[baldguy]

Thanks, Robskiwarrior. Your suggestions almost get me there. The reason I wanted the background on the li element was because I wanted it to stretch the entire width of the containing div. When I change to what you suggested, it displays only the one line, which is good, but there is the 1em grey width on the left (from the 1em li padding).

What I realized was that I could add margin-left: -1em to the a.active element, and it will pull it back to the left edge. That messes up the spacing on the arrow graphic, but unless there's a way to bump just that over 1em, I'll have to add the padding to the graphic itself.

Thanks for your help! Man, menus get me every time!