]>
Commit | Line | Data |
---|---|---|
84fb5b46 MKG |
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: 2em; /* 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 | 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(<%RT->Config->Get('WebPath')%>/NoAuth/css/images/arrows-ffffff.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ | |
99 | } | |
100 | a > .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 */ | |
105 | a:focus > .sf-sub-indicator, | |
106 | a:hover > .sf-sub-indicator, | |
107 | a:active > .sf-sub-indicator, | |
108 | li:hover > a > .sf-sub-indicator, | |
109 | li.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(<%RT->Config->Get('WebPath')%>/NoAuth/css/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 | } |