Solved

inheritance of style within lists

Posted on 2004-04-30
2
281 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 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

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

730 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