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