1 2/*** ESSENTIAL STYLES ***/ 3.sf-menu, .sf-menu * { 4 margin: 0; 5 padding: 0; 6 list-style: none; 7} 8.sf-menu { 9 line-height: 1.0; 10} 11.sf-menu ul { 12 position: absolute; 13 top: -999em; 14 width: 10em; /* left offset of submenus need to match (see below) */ 15} 16.sf-menu ul li { 17 width: 100%; 18} 19.sf-menu li:hover { 20 visibility: inherit; /* fixes IE7 'sticky bug' */ 21} 22.sf-menu li { 23 float: left; 24 position: relative; 25} 26.sf-menu a { 27 display: block; 28 position: relative; 29} 30.sf-menu li:hover ul, 31.sf-menu li.sfHover ul { 32 left: 0; 33 top: 2.5em; /* match top ul list item height */ 34 z-index: 99; 35} 36ul.sf-menu li:hover li ul, 37ul.sf-menu li.sfHover li ul { 38 top: -999em; 39} 40ul.sf-menu li li:hover ul, 41ul.sf-menu li li.sfHover ul { 42 left: 10em; /* match ul width */ 43 top: 0; 44} 45ul.sf-menu li li:hover li ul, 46ul.sf-menu li li.sfHover li ul { 47 top: -999em; 48} 49ul.sf-menu li li li:hover ul, 50ul.sf-menu li li li.sfHover ul { 51 left: 10em; /* match ul width */ 52 top: 0; 53} 54 55/*** DEMO SKIN ***/ 56.sf-menu { 57 float: left; 58 margin-bottom: 1em; 59} 60.sf-menu a { 61 border-left: 1px solid #fff; 62 border-top: 1px solid #CFDEFF; 63 padding: .75em 1em; 64 text-decoration:none; 65} 66.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ 67 color: #13a; 68} 69.sf-menu li { 70 background: #BDD2FF; 71} 72.sf-menu li li { 73 background: #AABDE6; 74} 75.sf-menu li li li { 76 background: #9AAEDB; 77} 78.sf-menu li:hover, .sf-menu li.sfHover, 79.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { 80 background: #CFDEFF; 81 outline: 0; 82} 83 84/*** arrows **/ 85.sf-menu a.sf-with-ul { 86 padding-right: 2.25em; 87 min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ 88} 89.sf-sub-indicator { 90 position: absolute; 91 display: block; 92 right: .75em; 93 top: 1.05em; /* IE6 only */ 94 width: 10px; 95 height: 10px; 96 text-indent: -999em; 97 overflow: hidden; 98 background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ 99} 100a > .sf-sub-indicator { /* give all except IE6 the correct values */ 101 top: .8em; 102 background-position: 0 -100px; /* use translucent arrow for modern browsers*/ 103} 104/* apply hovers to modern browsers */ 105a:focus > .sf-sub-indicator, 106a:hover > .sf-sub-indicator, 107a:active > .sf-sub-indicator, 108li:hover > a > .sf-sub-indicator, 109li.sfHover > a > .sf-sub-indicator { 110 background-position: -10px -100px; /* arrow hovers for modern browsers*/ 111} 112 113/* point right for anchors in subs */ 114.sf-menu ul .sf-sub-indicator { background-position: -10px 0; } 115.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } 116/* apply hovers to modern browsers */ 117.sf-menu ul a:focus > .sf-sub-indicator, 118.sf-menu ul a:hover > .sf-sub-indicator, 119.sf-menu ul a:active > .sf-sub-indicator, 120.sf-menu ul li:hover > a > .sf-sub-indicator, 121.sf-menu ul li.sfHover > a > .sf-sub-indicator { 122 background-position: -10px 0; /* arrow hovers for modern browsers*/ 123} 124 125/*** shadows for all but IE6 ***/ 126.sf-shadow ul { 127 background: url('../images/shadow.png') no-repeat bottom right; 128 padding: 0 8px 9px 0; 129 -moz-border-radius-bottomleft: 17px; 130 -moz-border-radius-topright: 17px; 131 -webkit-border-top-right-radius: 17px; 132 -webkit-border-bottom-left-radius: 17px; 133} 134.sf-shadow ul.sf-shadow-off { 135 background: transparent; 136}