Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

nested ul inherits from preceding li in IE?

4:47 pm on Oct 29, 2007 (gmt 0)

5+ Year Member

I am trying to create a navigation menu using nested lists, and am discovering that IE7 behaves in an unexpected way. I am identifying the current page with a class="current" indicator on the appropriate list item, so I can style that item differently. However, if there is a sub-menu underneath that list item, IE7 treats every item in that sub-menu as having class="current" - that is, it seems the entire nested list is inheriting the attributes of the list item that precedes it. And no, I am not putting the nested ul inside the <li>...</li> tags. Here is a very simple example:

li.current { color: red; }

<li>item 1</li>
<li>item 2</li>
<li class="current">item 3</li>
<li>item a</li>
<li>item b</li>
<li>item c</li>
<li>item 4</li>

If you load this page into Firefox, only "item 3" is red. However, in IE7, items a, b, and c are all red too.

First, is this indeed a bug in IE7?

Second, how would you suggest I work around this? Currently, I am defining new rules of the form:

li.current ul li { color: black; }

to reset the affected properties back to what I know they should have been. This actually works just fine - Firefox completely ignores these rules (as would, I assume, most browsers), so I don't even need to hack it in any special way to make these rules IE-only. But since there are numerous rules involved, I end up needing several of these IE-specific overrides - and they have to be repeated again at the next nesting level.

BTW, this is a simplified example. My real code has proper doctypes, etc. Also, while it is conceivable that a workaround that involved id instead of class might work, I'd much prefer to keep it class based, as I am actually trying to highlight all items in the hierarchy. That is, when the current page is "item b", I would like both "item b" *and* "item 3" highlighted. So if I used id's, I'd need multiple ones, meaning I would have to duplicate those rules.

5:55 pm on Oct 29, 2007 (gmt 0)

10+ Year Member

Your second level list should actually be a child of a <li>, not your parent <ul>. E.g.:

<li>First level
<li>Second level</li>

If you try this, you should find that the kind of CSS you're trying to use will work cross-browser.

6:54 pm on Oct 29, 2007 (gmt 0)

5+ Year Member


I don't know I got it into my head that putting my inner ul a a child of the outer ul was kosher. Of course, putting the inner ul inside my current li just means that now Firefox also styles all the sublist items the same way as the parent - that is, items a, b, and c are now red in both Firefox and IE7. So I'm still hoping to find a more elegant way of targeting *only* item 3, as opposed to having to define new rules just to put items a, b, and c back the way they would have been had they not been children of li.current...

7:48 pm on Oct 29, 2007 (gmt 0)

5+ Year Member

On further experimentation, I have something of a solution that seems sufficient at least for now. Any properties of the li itself still need to be reset, but that's just one rule - no big deal. When i said there were numerous properties involved, that's because I actually had rules to style particular components of the li.current - a, a:hover, a:visited, etc. There were all set using descendant selectors, so the rules applied to items a, b, and c. But if I use child selectors instead of a descendant selector, then they only apply to item 3.

So, thanks for the help! I'm still curious if/how others have dealt with this. It seems it would be a common issue when styling nested lists, and yet, all my attempts to search for info on styling nested lists never turned up examples of folks dealing with this (which is why I posted here).


Featured Threads

Hot Threads This Week

Hot Threads This Month