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 | 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 | }
|
---|
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('../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 | }
|
---|