.sf-menu,.sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul,.sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /****************** Skin ******************/ .sf-menu { float: left; margin-bottom: .5em; border: 1px solid #79B7E7; -moz-border-radius: .5em; -webkit-border-radius: .5em; font-size: 12px; background: #E6E6E6 url(../images/jquery/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x; } /*** Sub menu ***/ .sf-menu .sf-menu { float: left; margin-bottom: .5em; border: 1px solid #79B7E7; -moz-border-radius: .5em; -webkit-border-radius: .5em; font-size: 12px; } .sf-menu a { padding: .3em 1em; text-decoration: none; color: #2E6E9E; } /*** Hover ***/ .sf-menu li:hover,.sf-menu li.sfHover { background: url(../images/jquery/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x; outline: 0; } /*** Arrows ***/ .sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; } .sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; } a>.sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* Use translucent arrow for modern browsers */ } /*** Apply hovers to modern browsers ***/ a:focus>.sf-sub-indicator,a:hover>.sf-sub-indicator,a:active>.sf-sub-indicator,li:hover>a>.sf-sub-indicator,li.sfHover>a>.sf-sub-indicator { background-position: -10px -100px; /* Arrow hovers for modern browsers */ } /*** Point right for anchors in subs ***/ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a>.sf-sub-indicator { background-position: 0 0; } /*** Apply hovers to modern browsers ***/ .sf-menu ul a:focus>.sf-sub-indicator,.sf-menu ul a:hover>.sf-sub-indicator,.sf-menu ul a:active>.sf-sub-indicator,.sf-menu ul li:hover>a>.sf-sub-indicator,.sf-menu ul li.sfHover>a>.sf-sub-indicator { background-position: -10px 0; /* Arrow hovers for modern browsers */ } /*** Shadows ***/ .sf-shadow ul { padding: 0 9px 9px 0; } .sf-shadow ul.sf-shadow-off { background: transparent; }