[hotchilidamo]

I have a sub nav using list items and I am using li class="active" to show which page the user is currently on. This is working fine until I use it for the top level pages where the active carries over to the sub items within that section. So in the example below, Sub Nav 3 is highlighted along with all the Sub Sub Navs. I need to find a way to just highlight SubNav3 as active. Any ideas?

Here's a snippet of the code:

<ul>
<li><a href="subnav1.html" title="subnav1">SubNav1</a></li>
<li><a href="subnav2.html" title="subnav2">SubNav2</a></li>
<li class="active"><a href="subnav3.html" title="subnav3">SubNav3</a></li>
<ul>
<li><a href="subsubnav1.html" title="subsubnav1">SubSubNav1</a></li>
<li><a href="subsubnav2.html" title="subsubnav2">SubSubNav2</a></li>
<li><a href="subsubnav3.html" title="subsubnav3">SubSubNav3</a></li>
</ul>
<li><a href="subnav4.html" title="subnav4">SubNav4</a></li>

I'm new to CSS so could be missing something obvious.

It works fine in Firefox by the way, just not in IE

[88mph]

just to clarify, you are looking for a method to use CSS to change the display properties to the nav element related to the page that is currently active?

For example, if the user is on the Home page, the 'Home' button in the navigation is styled differently?

[herkalees]

You're falling victim to the power of the cascade. What you need to do is add just a little bit more CSS. This is because you've got some special 'active' styling applied to a <li> that contains its own child <li>s. Any rules applied to a parent automagically become applied to its children.

So, if you have CSS, for example, like this:

li.active {font-weight:bold;} /* This targets the parent element and all children inside of it */

and you don't want it to apply to the <li>s inside of it, you add this to your CSS:

/* This targets the parent element and all children inside of it */
li.active {font-weight:bold;}

/* This targets the children of any li with a class of 'active' */
li.active ul li {font-weight:normal;}

[hotchilidamo]

Originally Posted by herkalees

You're falling victim to the power of the cascade.

Indeed I am!

Ok, so I tried as you suggested and you have kindly solved the problem. Only snag is, the children are now no longer activating on rollover. Here's the code:

div#s11 ul li a:hover{
color: #474747;
background-color: #DFF0DB;
}

div#s11 li.active a {
color: #474747;
background-color: #DFF0DB;
}

div#s11 li.active ul li a{
background-color: #F2F2F2;
}

[herkalees]

Originally Posted by hotchilidamo

Indeed I am!

Ok, so I tried as you suggested and you have kindly solved the problem. Only snag is, the children are now no longer activating on rollover. Here's the code:

div#s11 ul li a:hover{
color: #474747;
background-color: #DFF0DB;
}

div#s11 li.active a {
color: #474747;
background-color: #DFF0DB;
}

div#s11 li.active ul li a{
background-color: #F2F2F2;
}

div#s11 ul li a:hover{
color: #474747;
background-color: #DFF0DB;
}

div#s11 li.active a {
color: #474747;
background-color: #DFF0DB;
}

div#s11 li.active ul li a{
background-color: #F2F2F2;
}
div#s11 li.active ul li a:hover{
/* set desired hover rules, for the children, here. */
}

[hotchilidamo]

Originally Posted by 88mph

just to clarify, you are looking for a method to use CSS to change the display properties to the nav element related to the page that is currently active?

For example, if the user is on the Home page, the 'Home' button in the navigation is styled differently?

Yes thats exactly it. I want the nav elements to have a green highlight when the user is on that page (i.e. active) and I want the other navigation elements to have the same highlight but only on rollover. The dfficulty comes when I have a parent nav element which is active and then the children nav elements taking on the same behaviour

[herkalees]

Originally Posted by hotchilidamo

Yes thats exactly it. I want the nav elements to have a green highlight when the user is on that page (i.e. active) and I want the other navigation elements to have the same highlight but only on rollover. The dfficulty comes when I have a parent nav element which is active and then the children nav elements taking on the same behaviour

Additionally, this little tutorial I wrote only moments ago might help you: CSS navigation problem…

[hotchilidamo]

Originally Posted by herkalees

div#s11 li.active ul li a:hover{
/* set desired hover rules, for the children, here. */
}

Ah ok, I get it. So you have to pretty much state everything again for children.

Excellent, thank you so much. You've saved me hours of pain

[djeglin]

Incidentally, you might not even need to use a "class=active" here. If this is a nav menu, you can actually use the cascade to your advantage thus:

Put an id on your body tag, or some other parent element to your navigation, that is indicative of the page you are on, like this:

<body id="home">

Then, you can make your menu like this:

<ul id="nav>
  <li class="home"><a href="your home link">Home</a></li>
  <li class="stuff"><a href="stuff">Stuff</a></li>
etc...

and your css can work like this:

#nav li {
  Normal styles here
}

#home #nav li.home,
#stuff #nav li.stuff,
#stuff2 #nav li.stuff2,
(etc...) {
  active styles here
}

This way, you don't need to add a "class=active" to any li elements in your markup, meaning that you can just copy and paste it across your pages without having to edit anything.

Thought that might help.

David

[herkalees]

Originally Posted by djeglin

Incidentally, you might not even need to use a "class=active" here. If this is a nav menu, you can actually use the cascade to your advantage thus:

Put an id on your body tag, or some other parent element to your navigation, that is indicative of the page you are on, like this:

<body id="home">

Then, you can make your menu like this:

<ul id="nav>
  <li class="home"><a href="your home link">Home</a></li>
  <li class="stuff"><a href="stuff">Stuff</a></li>
etc...

and your css can work like this:

#nav li {
  Normal styles here
}

#home #nav li.home,
#stuff #nav li.stuff,
#stuff2 #nav li.stuff2,
(etc...) {
  active styles here
}

This way, you don't need to add a "class=active" to any li elements in your markup, meaning that you can just copy and paste it across your pages without having to edit anything.

Thought that might help.

David

Beat ya to it, but yes you're right, this is the best method: problems using li class="active"