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

Reply via email to