Solved

inheritance of style within lists

Posted on 2004-04-30
2
280 Views
Last Modified: 2008-02-07
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
Comment
Question by:andreas_boehmer
2 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 50 total points
ID: 10965076
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
 

Author Comment

by:andreas_boehmer
ID: 10973571
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

791 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question