I'am using the navbar example. I would like to set another color for
the current top-level menu item if a submenu is selected current (like
a breadcrumb). I've put li class=current in both the top-level
menu and the submenu. I've figured out how to change the submenu
current font color but I have trouble finding a solution for the top-
level menu. Here is my css code:
/*** adding the class sf-navbar in addition to sf-menu creates an all-
horizontal nav-bar menu ***/
.sf-navbar {
background: #fff;
height: 1.4em; /* totale hoogte */
padding-bottom: 0.0em; /* totale hoogte */
position: relative;
}
.sf-navbar li {
background: #fff;
position: static;
font: 12px Arial;
color: #043882;
font-weight:bold;
text-transform: uppercase;
}
.sf-navbar a {
border-top: none;
}
.sf-navbar li ul {
width: 44em; /*IE6 soils itself without this*/
}
.sf-navbar li li, .sf-navbar li li a {
background: #fff;
position: relative;
font: 10px Arial;
color: #9c9e9f;
text-transform: uppercase;
}
.sf-navbar li li ul {
width: 13em; /* width van sub sub menu */
}
.sf-navbar li li li {
width: 100%;
}
.sf-navbar ul li {
width: auto;
float: left;
}
.sf-navbar a, .sf-navbar a:visited {
border: none;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar li li.current,
.sf-navbar li li.current a,
.sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active {
background: #fff;
color: #1e7bbc; /* hoofdmenu hover color */
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
ul.sf-navbar ul li:hover li,
ul.sf-navbar ul li.sfHover li,
.sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active {
background: #fff;
color: #1e7bbc; /* submenu hover color */
}
ul.sf-navbar li li li:hover,
ul.sf-navbar li li li.sfHover,
.sf-navbar li li.current li.current,
.sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar
ul li li a:active {
background: #fff;
color: #1e7bbc;
}
ul.sf-navbar .current ul,
ul.sf-navbar ul li:hover ul,
ul.sf-navbar ul li.sfHover ul {
left: 0; /* put sub sub back in view when hover */
top:1.5em; /* match top ul list item height */
}
ul.sf-navbar .current ul ul {
top:-999em; /* put sub sub out of view until hover
*/
}
.sf-navbar li li.current a {
font-weight:bold;
}
/*** point all arrows down ***/
/* point right for anchors in subs */
.sf-navbar ul .sf-sub-indicator { background-position: -10px -100px; }
.sf-navbar ul a .sf-sub-indicator { background-position: 0 -100px; }
/* apply hovers to modern browsers */
.sf-navbar ul a:focus .sf-sub-indicator,
.sf-navbar ul a:hover .sf-sub-indicator,
.sf-navbar ul a:active .sf-sub-indicator,
.sf-navbar ul li:hover a .sf-sub-indicator,
.sf-navbar ul li.sfHover a .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern
browsers*/
}
/*** remove shadow on first submenu ***/
.sf-navbar li ul {
background: transparent;
padding: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
}
