[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 289
  • Last Modified:

inheritance of style within lists

I have created a 2-level navigation using list items. I want to use different styles to highlight which section the user is currently in, but for some reason the style of the 2nd level navigation is always being overwritten by the style of its parent LI.

The HTML for it follows below. What I actually want it to look like is:
"Partnership" and "What do Partners do" are both highlighted (purple colour). All the other items should be white. But for some reason the entire nested ul takes on the style of its parent.

Thanks for your help on this - it's been driving me crazy!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
/*************************
 SECONDARY NAVIGATION
 *************************/
 
 ul#secondaryNav {
      padding: 0px;
      margin: 0px;
      list-style: none;
      background-color:#EF741D;
}
 
/* show secondary navigation items next to eachother */
ul#secondaryNav li {
     margin-left:0;
       padding-left:0;
       padding:0;
       background-color:#EF741D;
       color:#fff;
       padding-bottom: 0.7em;
       width:100%;
}

/* standard link */
ul#secondaryNav li a{
      color:#fff;
      text-decoration: none;
      font-weight: bold;
      padding-left: 0;
}

/* standard link highlighted */
ul#secondaryNav li.highlighted A{
      color:#660066;
}

/* standard link mouse over */
ul#secondaryNav li A:hover{
      color:#660066;
}

 
/*************************
 TERTIARY NAVIGATION
 *************************/
 
ul.tertiaryNav {
      padding: 0px;
      margin: 0px;
      list-style: none;
      margin-top: 0.5em;
      /*IE5x PC mis-implements the box model.
      */
      voice-family: "\"}\"";
      voice-family: inherit;
      margin-top: 0.5em;
}
html>body ul.tertiaryNav {
      margin-top: 0;
}
 

ul.tertiaryNav li {
       font-size: 80%;
}

ul.tertiaryNav li a{
      color:#ffffff;
      margin-left: 1.5em;
      /*
      IE5x PC mis-implements the box model.
      */
      voice-family: "\"}\"";
      voice-family: inherit;
      font-size:110%;
}

html>body ul.tertiaryNav li a {
      font-size: 90%;
}


</style>
</head>

<body>
<ul id="secondaryNav">
<li><a href="about_idea.php">The Idea</a></li>
<li><a href="about_objectives.php">Objectives</a></li>
<li class="highlighted"><a href="about_partnership.php">Partnership</a><ul class='tertiaryNav'><li class="highlighted"><a href="about_whatDoPartners.php">What do Partners do</a></li>
<li><a href="about_login.php">Partner Login</a></li>
<li><a href="about_email_password.php">Recover Password</a></li>
</ul>
</li>
<li><a href="about_sponsor.php">Sponsorship</a><ul class='tertiaryNav'><li><a href="about_howBecomeSponsor.php">How to Become a Sponsor?</a></li>
</ul>
</li>
</ul>
</body>
</html>
0
andreas_boehmer
Asked:
andreas_boehmer
1 Solution
 
seanpowellCommented:
Hi,

I would propably do it this way instead, by setting the class on the link. Since the entire sublist is contained within the <li> tag, setting it that way would be problematic...

/* standard link highlighted */
ul#secondaryNav li a.highlighted {
     color:#660066;
}

and then:

<li><a class="highlighted" href="about_partnership.php">Partnership</a>
  <ul class='tertiaryNav'>
    <li><a class="highlighted" href="about_whatDoPartners.php">What do Partners do</a></li>
0
 
andreas_boehmerAuthor Commented:
Thanks for the quick reply. That definitely did the trick. I wonder why my other css didn't work the way it meant to do.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now