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