|
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 } |
|
36 ul.sf-menu li:hover li ul, |
|
37 ul.sf-menu li.sfHover li ul { |
|
38 top: -999em; |
|
39 } |
|
40 ul.sf-menu li li:hover ul, |
|
41 ul.sf-menu li li.sfHover ul { |
|
42 left: 10em; /* match ul width */ |
|
43 top: 0; |
|
44 } |
|
45 ul.sf-menu li li:hover li ul, |
|
46 ul.sf-menu li li.sfHover li ul { |
|
47 top: -999em; |
|
48 } |
|
49 ul.sf-menu li li li:hover ul, |
|
50 ul.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 |
|
62 padding: .75em 1em; |
|
63 text-decoration:none; |
|
64 } |
|
65 .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ |
|
66 color: #13a; |
|
67 } |
|
68 .sf-menu li { |
|
69 background: #414141; |
|
70 } |
|
71 .sf-menu li li { |
|
72 background: #AABDE6; |
|
73 } |
|
74 .sf-menu li li li { |
|
75 background: #9AAEDB; |
|
76 } |
|
77 .sf-menu li:hover, .sf-menu li.sfHover, |
|
78 .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { |
|
79 outline: 0; |
|
80 } |
|
81 |
|
82 /*** arrows **/ |
|
83 .sf-menu a.sf-with-ul { |
|
84 padding-right: 2.25em; |
|
85 min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ |
|
86 } |
|
87 .sf-sub-indicator { |
|
88 position: absolute; |
|
89 display: block; |
|
90 right: .75em; |
|
91 top: 1.05em; /* IE6 only */ |
|
92 width: 10px; |
|
93 height: 10px; |
|
94 text-indent: -999em; |
|
95 overflow: hidden; |
|
96 } |
|
97 a > .sf-sub-indicator { /* give all except IE6 the correct values */ |
|
98 top: .8em; |
|
99 background-position: 0 -100px; /* use translucent arrow for modern browsers*/ |
|
100 } |
|
101 /* apply hovers to modern browsers */ |
|
102 a:focus > .sf-sub-indicator, |
|
103 a:hover > .sf-sub-indicator, |
|
104 a:active > .sf-sub-indicator, |
|
105 li:hover > a > .sf-sub-indicator, |
|
106 li.sfHover > a > .sf-sub-indicator { |
|
107 background-position: -10px -100px; /* arrow hovers for modern browsers*/ |
|
108 } |
|
109 |
|
110 /* point right for anchors in subs */ |
|
111 .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } |
|
112 .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } |
|
113 /* apply hovers to modern browsers */ |
|
114 .sf-menu ul a:focus > .sf-sub-indicator, |
|
115 .sf-menu ul a:hover > .sf-sub-indicator, |
|
116 .sf-menu ul a:active > .sf-sub-indicator, |
|
117 .sf-menu ul li:hover > a > .sf-sub-indicator, |
|
118 .sf-menu ul li.sfHover > a > .sf-sub-indicator { |
|
119 background-position: -10px 0; /* arrow hovers for modern browsers*/ |
|
120 } |
|
121 |
|
122 /*** shadows for all but IE6 ***/ |
|
123 .sf-shadow ul { |
|
124 padding: 0 8px 9px 0; |
|
125 -moz-border-radius-bottomleft: 17px; |
|
126 -moz-border-radius-topright: 17px; |
|
127 -webkit-border-top-right-radius: 17px; |
|
128 -webkit-border-bottom-left-radius: 17px; |
|
129 } |
|
130 .sf-shadow ul.sf-shadow-off { |
|
131 background: transparent; |
|
132 } |
|
133 |
|
134 |
|
135 /*** ESSENTIAL STYLES ***/ |
|
136 .sf-menu1, .sf-menu1 * { |
|
137 margin: 0; |
|
138 padding: 0; |
|
139 list-style: none; |
|
140 } |
|
141 .sf-menu1 { |
|
142 line-height: 1.0; |
|
143 } |
|
144 .sf-menu1 ul { |
|
145 position: absolute; |
|
146 top: -999em; |
|
147 width: 10em; /* left offset of submenus need to match (see below) */ |
|
148 } |
|
149 .sf-menu1 ul li { |
|
150 width: 100%; |
|
151 } |
|
152 .sf-menu1 li:hover { |
|
153 visibility: inherit; /* fixes IE7 'sticky bug' */ |
|
154 } |
|
155 .sf-menu1 li { |
|
156 float: left; |
|
157 position: relative; |
|
158 } |
|
159 .sf-menu1 a { |
|
160 display: block; |
|
161 position: relative; |
|
162 } |
|
163 .sf-menu1 li:hover ul, |
|
164 .sf-menu1 li.sfHover ul { |
|
165 left: 0; |
|
166 top: 2.5em; /* match top ul list item height */ |
|
167 z-index: 99; |
|
168 } |
|
169 ul.sf-menu1 li:hover li ul, |
|
170 ul.sf-menu1 li.sfHover li ul { |
|
171 top: -999em; |
|
172 } |
|
173 ul.sf-menu1 li li:hover ul, |
|
174 ul.sf-menu1 li li.sfHover ul { |
|
175 left: 10em; /* match ul width */ |
|
176 top: 0; |
|
177 } |
|
178 ul.sf-menu1 li li:hover li ul, |
|
179 ul.sf-menu1 li li.sfHover li ul { |
|
180 top: -999em; |
|
181 } |
|
182 ul.sf-menu1 li li li:hover ul, |
|
183 ul.sf-menu1 li li li.sfHover ul { |
|
184 left: 10em; /* match ul width */ |
|
185 top: 0; |
|
186 } |
|
187 |
|
188 /*** DEMO SKIN ***/ |
|
189 .sf-menu1 { |
|
190 float: left; |
|
191 margin-bottom: 1em; |
|
192 } |
|
193 .sf-menu1 a { |
|
194 border-left: 1px solid #fff; |
|
195 border-top: 1px solid #CFDEFF; |
|
196 padding: .75em 1em; |
|
197 text-decoration:none; |
|
198 } |
|
199 .sf-menu1 a, .sf-menu1 a:visited { /* visited pseudo selector so IE6 applies text colour*/ |
|
200 color: #13a; |
|
201 } |
|
202 .sf-menu1 li { |
|
203 background: #BDD2FF; |
|
204 } |
|
205 .sf-menu1 li li { |
|
206 background: #AABDE6; |
|
207 } |
|
208 .sf-menu1 li li li { |
|
209 background: #9AAEDB; |
|
210 } |
|
211 .sf-menu1 li:hover, .sf-menu1 li.sfHover, |
|
212 .sf-menu1 a:focus, .sf-menu1 a:hover, .sf-menu1 a:active { |
|
213 background: #CFDEFF; |
|
214 outline: 0; |
|
215 } |
|
216 |
|
217 /*** arrows **/ |
|
218 .sf-menu1 a.sf-with-ul { |
|
219 padding-right: 2.25em; |
|
220 min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ |
|
221 } |
|
222 .sf-sub-indicator { |
|
223 position: absolute; |
|
224 display: block; |
|
225 right: .75em; |
|
226 top: 1.05em; /* IE6 only */ |
|
227 width: 10px; |
|
228 height: 10px; |
|
229 text-indent: -999em; |
|
230 overflow: hidden; |
|
231 } |
|
232 a > .sf-sub-indicator { /* give all except IE6 the correct values */ |
|
233 top: .8em; |
|
234 background-position: 0 -100px; /* use translucent arrow for modern browsers*/ |
|
235 } |
|
236 /* apply hovers to modern browsers */ |
|
237 a:focus > .sf-sub-indicator, |
|
238 a:hover > .sf-sub-indicator, |
|
239 a:active > .sf-sub-indicator, |
|
240 li:hover > a > .sf-sub-indicator, |
|
241 li.sfHover > a > .sf-sub-indicator { |
|
242 background-position: -10px -100px; /* arrow hovers for modern browsers*/ |
|
243 } |
|
244 |
|
245 /* point right for anchors in subs */ |
|
246 .sf-menu1 ul .sf-sub-indicator { background-position: -10px 0; } |
|
247 .sf-menu1 ul a > .sf-sub-indicator { background-position: 0 0; } |
|
248 /* apply hovers to modern browsers */ |
|
249 .sf-menu1 ul a:focus > .sf-sub-indicator, |
|
250 .sf-menu1 ul a:hover > .sf-sub-indicator, |
|
251 .sf-menu1 ul a:active > .sf-sub-indicator, |
|
252 .sf-menu1 ul li:hover > a > .sf-sub-indicator, |
|
253 .sf-menu1 ul li.sfHover > a > .sf-sub-indicator { |
|
254 background-position: -10px 0; /* arrow hovers for modern browsers*/ |
|
255 } |
|
256 |
|
257 /*** shadows for all but IE6 ***/ |
|
258 .sf-shadow ul { |
|
259 background: url('../images/shadow.png') no-repeat bottom right; |
|
260 padding: 0 8px 9px 0; |
|
261 -moz-border-radius-bottomleft: 17px; |
|
262 -moz-border-radius-topright: 17px; |
|
263 -webkit-border-top-right-radius: 17px; |
|
264 -webkit-border-bottom-left-radius: 17px; |
|
265 } |
|
266 .sf-shadow ul.sf-shadow-off { |
|
267 background: transparent; |
|
268 } |