Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

inheritance of style within lists

Posted on 2004-04-30
2
Medium Priority
?
285 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

618 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