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; }