For what it's worth, I thought this style sheet might be interesting.
We have a navigation that can be as deep as three nested elements. This
style sheet is imported as nav.css. Each body is given a series of
class
elements (class="sub1 sub1sub1 asub1sub1") or something similar,
depending
on where the page sits in the navigation list.
[on v2, I changed sub1 to nav1 which is a better description for the
top-level]
The following styles open, close the nested elements, highlight the
current
page, show who the parent element is via color, etc.
It took forever to create, but I kind of like it now, if for no other
reason
that trying to impress co-workers with the overwhelming logic.
Of course, they say, why couldn't we just put a style in the head of
each
page. Yeah, sure, go the easy route.
Apologies in advance if this message is too long for your mailbox.
Take a deep breath.
/* ======================== persistant navigation
===============================*/
#navigation {background-color:#28455B;}
#mainnav {background:#29475d; width:182px;
list-style-type:none;padding:10px 0 10px 7px;}
#mainnav li {list-style-type:none; margin:0 0 -1px 0; padding:0;}
#mainnav li a {display:block; border-top:1px solid #fff;
padding-right:5px;
padding-left:5px; text-decoration:none;
font-weight:bold!important; color:#fff; background:#0b73c1; }
#mainnav li a:hover {background-color:#fff; color:#000; }
#mainnav li ul li a {background-color:#7fc4f7; color:#333;
padding-left:15px;}
#mainnav li ul li ul li a {background-color:#C7E7FF; color:#333;
padding-left:30px;}
#mainnav li ul, #mainnav li ul li ul, #mainnav li ul li ul li ul
{display:none;}
/* show sub on hover, this is annoying with long lists
#mainnav li:hover ul, #mainnav li ul li:hover ul, #mainnav li ul li ul
li:hover ul {display:block;}*/
/* open submenus */
.sub1 #sub1 ul,
.sub2 #sub2 ul,
.sub3 #sub3 ul,
.sub4 #sub4 ul,
.sub5 #sub5 ul,
.sub6 #sub6 ul,
.sub7 #sub7 ul,
.sub8 #sub8 ul,
.sub9 #sub9 ul,
.sub10 #sub10 ul,
.sub11 #sub1 ul {display:block;}
/* keep their sub menus closed */
.sub1 #sub1 ul li ul,
.sub2 #sub2 ul li ul,
.sub3 #sub3 ul li ul,
.sub4 #sub4 ul li ul,
.sub5 #sub5 ul li ul,
.sub6 #sub6 ul li ul,
.sub7 #sub7 ul li ul,
.sub8 #sub8 ul li ul,
.sub9 #sub9 ul li ul,
.sub10 #sub10 ul li ul,
.sub11 #sub1 ul li ul{display:none;}
/* open sub sub menus */
.sub1sub1 #sub1sub1 ul,
.sub1sub2 #sub1sub2 ul,
.sub1sub3 #sub1sub3 ul,
.sub1sub4 #sub1sub4 ul,
.sub1sub5 #sub1sub5 ul{display:block!important;}
.sub2sub1 #sub2sub1 ul,
.sub2sub2 #sub2sub2 ul,
.sub2sub3 #sub2sub3 ul,
.sub2sub4 #sub2sub4 ul,
.sub2sub5 #sub2sub5 ul{display:block!important;}
.sub3sub1 #sub3sub1 ul,
.sub3sub2 #sub3sub2 ul,
.sub3sub3 #sub3sub3 ul,
.sub3sub4 #sub3sub4 ul,
.sub3sub5 #sub3sub5 ul{display:block!important;}
.sub4sub1 #sub4sub1 ul,
.sub4sub2 #sub4sub2 ul,
.sub4sub3 #sub4sub3 ul,
.sub4sub4 #sub4sub4 ul,
.sub4sub5 #sub4sub5 ul {display:block!important;}
.sub5sub1 #sub5sub1 ul,
.sub5sub2 #sub5sub2 ul,
.sub5sub3 #sub5sub3 ul,
.sub5sub4 #sub5sub4 ul,
.sub5sub5 #sub5sub5 ul {display:block!important;}
.sub6sub1 #sub6sub1 ul,
.sub6sub2 #sub6sub2 ul,
.sub6sub3 #sub6sub3 ul,
.sub6sub4 #sub6sub4 ul,
.sub6sub5 #sub6sub5 ul{display:block!important;}
.sub7sub1 #sub7sub1 ul,
.sub7sub2 #sub7sub2 ul,
.sub7sub3 #sub7sub3 ul,
.sub7sub4 #sub7sub4 ul,
.sub7sub5 #sub7sub5 ul{display:block!important;}
.sub8sub1 #sub8sub1 ul,
.sub8sub2 #sub8sub2 ul,
.sub8sub3 #sub8sub3 ul,
.sub8sub4 #sub8sub4 ul,
.sub8sub5 #sub8sub5 ul{display:block!important;}
.sub9sub1 #sub9sub1 ul,
.sub9sub2 #sub9sub2 ul,
.sub9sub3 #sub9sub3 ul,
.sub9sub4 #sub9sub4 ul,
.sub9sub5 #sub9sub5 ul{display:block!important;}
.sub10sub1 #sub10sub1 ul,
.sub10sub2 #sub10sub2 ul,
.sub10sub3 #sub10sub3 ul,
.sub10sub4 #sub10sub4 ul,
.sub10sub5 #sub10sub5 ul {display:block!important;}
.sub11sub1 sub11sub1# ul,
.sub11sub2 #sub11sub2 ul,
.sub11sub3 #sub11sub3 ul,
.sub11sub4 #sub11sub4 ul,
.sub11sub5 #sub11sub5 ul {display:block!important;}
.sub12sub1 #sub12sub1 ul,
.sub12sub2 #sub12sub2 ul,
.sub12sub3 #sub12sub3 ul,
.sub12sub4 #sub12sub4 ul,
.sub12sub5 #sub12sub5 ul{display:block!important;}
/*Give the Parent levels a lighter shade of blue and black text */
.sub1 #sub1 a,
.sub2 #sub2 a,
.sub3 #sub3 a,
.sub4 #sub4 a,
.sub5 #sub5 a,
.sub6 #sub6 a,
.sub7 #sub7 a,
.sub8 #sub8 a,
.sub9 #sub9 a,
.sub10 #sub10 a,
.sub11 #sub1 a {background-color:#7fc4f7; color:#000;}
.sub1sub1 #sub1sub1 a,
.sub1sub2 #sub1sub2 a,
.sub1sub3 #sub1sub3 a,
.sub1sub4 #sub1sub4 a,
.sub1sub5 #sub1sub5 a{background-color:#C7E7FF; color:#000;}
.sub2sub1 #sub2sub1 a,
.sub2sub2 #sub2sub2 a,
.sub2sub3 #sub2sub3 a,
.sub2sub4 #sub2sub4 a,
.sub2sub5 #sub2sub5 a{background-color:#C7E7FF; color:#000;}
.sub3sub1 #sub3sub1 a,
.sub3sub2 #sub3sub2 a,
.sub3sub3 #sub3sub3 a,
.sub3sub4 #sub3sub4 a,
.sub3sub5 #sub3sub5 a{background-color:#C7E7FF; color:#000;}
.sub4sub1 #sub4sub1 a,
.sub4sub2 #sub4sub2 a,
.sub4sub3 #sub4sub3 a,
.sub4sub4 #sub4sub4 a,
.sub4sub5 #sub4sub5 a {background-color:#C7E7FF; color:#000;}
.sub5sub1 #sub5sub1 a,
.sub5sub2 #sub5sub2 a,
.sub5sub3 #sub5sub3 a,
.sub5sub4 #sub5sub4 a,
.sub5sub5 #sub5sub5 a {background-color:#C7E7FF; color:#000;}
.sub6sub1 #sub6sub1 a,
.sub6sub2 #sub6sub2 a,
.sub6sub3 #sub6sub3 a,
.sub6sub4 #sub6sub4 a,
.sub6sub5 #sub6sub5 a{background-color:#C7E7FF; color:#000;}
.sub7sub1 #sub7sub1 a,
.sub7sub2 #sub7sub2 a,
.sub7sub3 #sub7sub3 a,
.sub7sub4 #sub7sub4 a,
.sub7sub5 #sub7sub5 a{background-color:#C7E7FF; color:#000;}
.sub8sub1 #sub8sub1 a,
.sub8sub2 #sub8sub2 a,
.sub8sub3 #sub8sub3 a,
.sub8sub4 #sub8sub4 a,
.sub8sub5 #sub8sub5 a{background-color:#C7E7FF; color:#000;}
.sub9sub1 #sub9sub1 a,
.sub9sub2 #sub9sub2 a,
.sub9sub3 #sub9sub3 a,
.sub9sub4 #sub9sub4 a,
.sub9sub5 #sub9sub5 a{background-color:#C7E7FF; color:#000;}
.sub10sub1 #sub10sub1 a,
.sub10sub2 #sub10sub2 a,
.sub10sub3 #sub10sub3 a,
.sub10sub4 #sub10sub4 a,
.sub10sub5 #sub10sub5 a {background-color:#C7E7FF; color:#000;}
.sub11sub1 sub11sub1# a,
.sub11sub2 #sub11sub2 a,
.sub11sub3 #sub11sub3 a,
.sub11sub4 #sub11sub4 a,
.sub11sub5 #sub11sub5 a {background-color:#C7E7FF; color:#000;}
.sub12sub1 #sub12sub1 a,
.sub12sub2 #sub12sub2 a,
.sub12sub3 #sub12sub3 a,
.sub12sub4 #sub12sub4 a,
.sub12sub5 #sub12sub5 a{background-color:#C7E7FF; color:#000;}
/* Now lets give their children grey text */
.sub1 #sub1 ul a,
.sub2 #sub2 ul a,
.sub3 #sub3 ul a,
.sub4 #sub4 ul a,
.sub5 #sub5 ul a,
.sub6 #sub6 ul a,
.sub7 #sub7 ul a,
.sub8 #sub8 ul a,
.sub9 #sub9 ul a,
.sub10 #sub10 ul a,
.sub11 #sub1 ul a {color:#333;}
.sub1sub1 #sub1sub1 ul a,
.sub1sub2 #sub1sub2 ul a,
.sub1sub3 #sub1sub3 ul a,
.sub1sub4 #sub1sub4 ul a,
.sub1sub5 #sub1sub5 ul a{color#333;}
.sub2sub1 #sub2sub1 ul a,
.sub2sub2 #sub2sub2 ul a,
.sub2sub3 #sub2sub3 ul a,
.sub2sub4 #sub2sub4 ul a,
.sub2sub5 #sub2sub5 ul a{color#333;}
.sub3sub1 #sub3sub1 ul a,
.sub3sub2 #sub3sub2 ul a,
.sub3sub3 #sub3sub3 ul a,
.sub3sub4 #sub3sub4 ul a,
.sub3sub5 #sub3sub5 ul a{color#333;}
.sub4sub1 #sub4sub1 ul a,
.sub4sub2 #sub4sub2 ul a,
.sub4sub3 #sub4sub3 ul a,
.sub4sub4 #sub4sub4 ul a,
.sub4sub5 #sub4sub5 ul a {color#333;}
.sub5sub1 #sub5sub1 ul a,
.sub5sub2 #sub5sub2 ul a,
.sub5sub3 #sub5sub3 ul a,
.sub5sub4 #sub5sub4 ul a,
.sub5sub5 #sub5sub5 ul a {color#333;}
.sub6sub1 #sub6sub1 ul a,
.sub6sub2 #sub6sub2 ul a,
.sub6sub3 #sub6sub3 ul a,
.sub6sub4 #sub6sub4 ul a,
.sub6sub5 #sub6sub5 ul a{color#333;}
.sub7sub1 #sub7sub1 ul a,
.sub7sub2 #sub7sub2 ul a,
.sub7sub3 #sub7sub3 ul a,
.sub7sub4 #sub7sub4 ul a,
.sub7sub5 #sub7sub5 ul a{color#333;}
.sub8sub1 #sub8sub1 ul a,
.sub8sub2 #sub8sub2 ul a,
.sub8sub3 #sub8sub3 ul a,
.sub8sub4 #sub8sub4 ul a,
.sub8sub5 #sub8sub5 ul a{color#333;}
.sub9sub1 #sub9sub1 ul a,
.sub9sub2 #sub9sub2 ul a,
.sub9sub3 #sub9sub3 ul a,
.sub9sub4 #sub9sub4 ul a,
.sub9sub5 #sub9sub5 ul a{color#333;}
.sub10sub1 #sub10sub1 ul a,
.sub10sub2 #sub10sub2 ul a,
.sub10sub3 #sub10sub3 ul a,
.sub10sub4 #sub10sub4 ul a,
.sub10sub5 #sub10sub5 ul a {color#333;}
.sub11sub1 sub11sub1# ul a,
.sub11sub2 #sub11sub2 ul a,
.sub11sub3 #sub11sub3 ul a,
.sub11sub4 #sub11sub4 ul a,
.sub11sub5 #sub11sub5 ul a {color#333;}
.sub12sub1 #sub12sub1 ul a,
.sub12sub2 #sub12sub2 ul a,
.sub12sub3 #sub12sub3 ul a,
.sub12sub4 #sub12sub4 ul a,
.sub12sub5 #sub12sub5 ul a{color#333;}
/*give the current page a bullet to the right */
/* -- top level items --*/
.asub1 #asub1, .asub2 #asub2,.asub3 #asub3,.asub4 #asub4,.asub5 #asub5,
.asub6 #asub6, .asub7 #asub7,.asub8 #asub8,.asub9 #asub9,.asub10
#asub10 {background:#F1F9FF url(bg-here.gif) no-repeat right
!important;
color:#000; }
/*first sublevel items -- */
.asub1sub1 #asub1sub1, .asub1sub2 #asub1sub2, .asub1sub3 #asub1sub3,
.asub1sub4 #asub1sub4,
.asub1sub5 #asub1sub5, .asub1sub6 #asub1sub6 {background:#F1F9FF
url(bg-here.gif) no-repeat right!important; padding-right:11px;
color:#000;}
.asub2sub1 #asub2sub1, .asub2sub2 #asub2sub2, .asub2sub3 #asub2sub3,
.asub2sub4 #asub2sub4,
.asub2sub5 #asub2sub5, .asub2sub6 #asub2sub6 {background:#F1F9FF
url(bg-here.gif) no-repeat right!important; padding-right:11px;
color:#000;}
.asub3sub1 #asub3sub1, .asub3sub2 #asub3sub2, .asub3sub3 #asub3sub3,
.asub3sub4 #asub3sub4,
.asub3sub5 #asub3sub5, .asub3sub6 #asub3sub6 {background:#F1F9FF
url(bg-here.gif) no-repeat right!important; padding-right:11px;
color:#000;}
.asub4sub1 #asub4sub1, .asub4sub2 #asub4sub2, .asub4sub3 #asub4sub3,
.asub4sub4 #asub4sub4,
.asub5sub5 #asub5sub5, .asub6sub6 #asub6sub6 {background:#F1F9FF
url(bg-here.gif) no-repeat right!important; padding-right:11px;
color:#000;}
.asub6sub1 #asub6sub1, .asub6sub2 #asub6sub2, .asub6sub3 #asub6sub3,
.asub6sub4 #asub6sub4,
.asub6sub5 #asub6sub5, .asub6sub6 #asub6sub6 {background:#F1F9FF
url(bg-here.gif) no-repeat right!important; padding-right:11px;
color:#000;}
.asub7sub1 #asub7sub1, .asub7sub2 #asub7sub2, .asub7sub3 #asub7sub3,
.asub7sub4 #asub7sub4,
.asub7sub5 #asub7sub5, .asub7sub6 #asub7sub6 {background:#F1F9FF
url(bg-here.gif) no-repeat right!important; padding-right:11px;
color:#000;}
.asub8sub1 #asub8sub1, .asub8sub2 #asub8sub2, .asub8sub3 #asub8sub3,
.asub8sub4 #asub8sub4,
.asub8sub5 #asub8sub5, .asub8sub6 #asub8sub6 {background:#F1F9FF
url(bg-here.gif) no-repeat right!important; padding-right:11px;
color:#000;}
.asub9sub1 #asub9sub1, .asub9sub2 #asub9sub2, .asub9sub3 #asub9sub3,
.asub9sub4 #asub9sub4,
.asub9sub5 #asub9sub5, .asub9sub6 #asub9sub6 {background:#F1F9FF
url(bg-here.gif) no-repeat right!important; padding-right:11px;
color:#000;}
.asub1sub10 #asub10sub1, .asub10sub2 #asub10sub2, .asub10sub3
#asub10sub3,
.asub10sub4 #asub10sub4,
.asub10sub5 #asub10sub5, .asub10sub6 #asub10sub6 {background:#F1F9FF
url(bg-here.gif) no-repeat right!important; padding-right:11px;
color:#000;}
/* ============ third levels ==============*/
.asub3sub3sub1 #asub3sub3sub1, .asub3sub3sub2 #asub3sub3sub2,
.asub3sub3sub4
#asub3sub3sub4, a.sub3sub3sub5 #asub3sub3sub5,
.asub3sub3sub6 #asub3sub3sub6 {background:#F1F9FF url(bg-here.gif)
no-repeat
right!important; padding-right:11px; color:#000;}
#mainnav li a.here {background-color:#fff url(bg-here.gif) no-repeat
right;
padding-right:11px; color:#000;}
/*=================================Hacks============================ */
/* \*/
* html #mainnav li {
height: 1%;
float:left;
}
* html #mainnav li a {
height: 1%;
}
/* */
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
