?
Solved

inheritance of style within lists

Posted on 2004-04-30
2
Medium Priority
?
284 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 150 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month9 days, 17 hours left to enroll

762 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