Sent by Michael Wilson on 2 November 2004 17:05
Hi,
Some of the issues I found were related to specificity. When you style
the main list items you can use something like #nav ul li. This gives
you a specificity of 101 and will override any previous li {} properties
and values. When styling a nested list use something like #nav ul li ul
li. This will give you a specificity of 104 and will override previous
#nav ul li property values.
You can find more information on specificity here:
http://www.w3.org/TR/CSS21/cascade.html#specificity
Some other issues were related to which elements you were styling. I've
shuffled some of the CSS and markup around a bit. For example, I moved
the navon and subnavon id's to the <a> elements rather than the <li>'s,
so the CSS would style a single link rather than an entire list item
because that can impact the nested list items. I also reworked some of
the margins so the menu items would stop jumping around when the left
border was applied on hover. I've also tried to clean up the CSS a bit
am remove some unnecessary properties and values, but I'm sure it could
still be improved.
I'm still not sure if I have this looking exactly the way you intended,
but it should be close enough for you to tweak to your liking. It's
always good practice to provide at least a rough image of what you are
trying to achieve, so we have a little more to go on.
CSS:
body {
background-color: #FFF;
color: #000;
font: normal .85em Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li {
font-weight: bold;
margin: 0;
padding: 2px 0 2px 0;
width: 13em;
}
#nav ul li ul li {
font-weight: normal;
margin: 0 0 0 15px;
padding: 2px 0 2px 0;
}
#nav a {
color: #000;
display: block;
margin: 0 0 0 5px;
padding: 4px 0 4px 0;
text-decoration: none;
width: 100%;
}
#nav a:hover, #nav a:active, #nav a:visited {
background-color: #006600;
border-left: 5px #FF0000 solid;
color: #FFF;
margin: 0;
}
#nav #navon {
background-color: #006600;
border-left: 5px #FF0000 solid;
color: #FFF;
margin: 0;
}
#nav #subnavon {
background-color: #006600;
border-left: 5px #ff0000 solid;
color: #FFF;
margin: 0;
}
Markup:
<div id="nav">
<ul>
<li><a href="motorhomesclassa.htm">Motorhomes Class A</a>
<ul>
<li><a href="MHA30.htm">Deluxe</a></li>
<li><a href="MHA34.htm">Luxury</a></li>
</ul>
</li>
<!-- highlight as current-->
<li><a href="motorhomesclassc.htm" id="navon">Motorhomes Class C</a>
<ul>
<!-- also highlight as current-->
<li><a href="MHC22.htm" id="subnavon">Compact</a></li>
<li><a href="MHC24.htm">Touring</a></li>
<li><a href="MHC28.htm">Deluxe</a></li>
</ul>
</li>
<li><a href="trailerhomes.htm">Trailor Homes</a>
<ul>
<li><a href="STT.htm">Touring Trailer</a></li>
<li><a href="S5TT.htm">Touring 5th Wheel</a></li>
<li><a href="DTT.htm">Deluxe Trailer</a></li>
<li><a href="D5TT.htm">Deluxe 5th Wheel</a></li>
<li><a href="LTT.htm">Luxury Trailer</a></li>
<li><a href="L5TT.htm">Luxury 5th Wheel</a></li>
</ul>
</li>
<li><a href="vancampers.htm">Van Campers</a>
<ul>
<li><a href="DVC.htm">Deluxe Van Campers</a></li>
</ul>
</li>
</ul>
</div>
John Readwin wrote:
> I'm trying to figure out how to properly stylize two LI at different
> levels within a nested UL/LI setup.
> below is my "navbar"
> Can I stylize them separately?
> if so how do I go about it?
Best regards,
Michael Wilson
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
