Sent by John Readwin on 2 November 2004 09:09
I've gone through a couple of tutorials and thought I had things
figured out- WRONG!
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"
How do I stylize a first level LI and a nested LI with different styles
for a particular "current" page?
I want to show the current "category" as well as the current page
When I give an ID to the first level LI , part of the style seems to
carry over to the nested LI's ( which does make sense since the nested
UL and LI are within it)
I have tried to create two seperate divs for each LI level to indicate
the current page.
Can I stylize them separately?
if so how do I go about it?
I have included my CSS after the code
here is the link for the page I'm using as a test.( it's obviously not
working!)
http://test.netextras.com/motorhomesclassc2.htm
<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>
<li id="navon"><a href="motorhomesclassc.htm">Motorhomes Class
C</a><!-- highlight as current-->
<ul>
<li id="subnavon"><a href="MHC22.htm">Compact</a></li><!-- also
highlight as current-->
<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>
#nav ul {
margin: 0;
padding:0;
list-style: none;
}
#nav li {
margin: 0;
}
#nav a {
display: block;
color: #000000;
background-color: #ffffff;
width:13em;
padding: 4px 10px 4px 5px;
text-decoration: none;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
font-weight: bold;
font-size: .85em;
}
#nav li li a {
margin-left:15px;
display: block;
color: #000000;
background-color: #ffffff;
width:13em;
padding: 2px 0px 3px 0px;
text-decoration: none;
border-bottom: 1px solid #ffffff;
font-weight: normal;
}
#nav a:hover {
background-color: #006600;
color: #ffffff;
border-left: 5px #ff0000 solid;
}
#navon {
background-color: #006600;
color: #ffffff;
border-left: 5px #ff0000 solid;
}
#subnavon {
background-color: #006600;
color: #ffffff;
border-left: 5px #ff0000 solid;
}
Thanks
John Readwin
______________________________________________________________________
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/
