1
|
/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
|
2
|
* Dropdowns by Patrick Griffiths and Dan Webb.
|
3
|
* http://carroll.org.uk/sandbox/suckerfish/bones2.html
|
4
|
*/
|
5
|
|
6
|
/* ----[ LINKS ]----*/
|
7
|
|
8
|
/* all menu links */
|
9
|
#nav a, #subMenusContainer a{
|
10
|
text-decoration:none;
|
11
|
display:block;
|
12
|
padding:10px 20px;
|
13
|
background-color:#fff ;
|
14
|
-moz-border-radius: 7px;
|
15
|
-webkit-border-radius: 7px;
|
16
|
}
|
17
|
|
18
|
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
|
19
|
#nav a{
|
20
|
margin:0;
|
21
|
float:left;
|
22
|
}
|
23
|
|
24
|
/* Just sub menu links */
|
25
|
#subMenusContainer a, #nav li li a{
|
26
|
text-align:left;
|
27
|
}
|
28
|
|
29
|
/* All menu links on hover or focus */
|
30
|
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
|
31
|
background-color:#F6C739 ;
|
32
|
color:#FFF;
|
33
|
}
|
34
|
|
35
|
/* sub menu links on hover or focus */
|
36
|
#subMenusContainer a:hover,
|
37
|
#subMenusContainer a:focus,
|
38
|
#nav a.mainMenuParentBtnFocused,
|
39
|
#subMenusContainer a.subMenuParentBtnFocused,
|
40
|
#nav li a:hover,
|
41
|
#nav li a:focus{
|
42
|
background-color:#F6C739 ;
|
43
|
color:#FFF;
|
44
|
}
|
45
|
|
46
|
/* Parent Sub Menu Links ---[javascript users only]*/
|
47
|
.subMenuParentBtn{
|
48
|
background: url(../img/arrow_right.gif) right center no-repeat;
|
49
|
}
|
50
|
|
51
|
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
|
52
|
.subMenuParentBtnFocused{
|
53
|
background: url(../img/arrow_right_over.gif) right center no-repeat;
|
54
|
}
|
55
|
|
56
|
/* Parent Main Menu Links ---[javascript users only]*/
|
57
|
.mainMenuParentBtn{
|
58
|
background: url(../img/arrow_down.gif) right center no-repeat;
|
59
|
}
|
60
|
|
61
|
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
|
62
|
.mainMenuParentBtnFocused{
|
63
|
background: url(../img/arrow_down_over.gif) right center no-repeat;
|
64
|
}
|
65
|
|
66
|
/* ----[ OLs ULs, LIs, and DIVs ]----*/
|
67
|
|
68
|
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
|
69
|
.smOW{
|
70
|
display:none;
|
71
|
position: absolute;
|
72
|
overflow:hidden;
|
73
|
/*the 2px left & right padding lets you have a 1px border
|
74
|
on the ul or ol inside since overflow is set to hidden*/
|
75
|
padding:0 2px;
|
76
|
margin:0 0 0 -2px;
|
77
|
}
|
78
|
|
79
|
|
80
|
/* All ULs and OLs */
|
81
|
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
|
82
|
padding: 0;
|
83
|
margin: 0;
|
84
|
list-style: none;
|
85
|
line-height: 1em;
|
86
|
}
|
87
|
|
88
|
/* All submenu OLs and ULs */
|
89
|
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
|
90
|
/*border around submenu goes here*/
|
91
|
background:#fff;
|
92
|
border:1px solid #C3D46A;
|
93
|
left:0;
|
94
|
}
|
95
|
|
96
|
|
97
|
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
|
98
|
#nav li {
|
99
|
/*great place to use a background image as a divider*/
|
100
|
display:block;
|
101
|
list-style:none;
|
102
|
position:relative;
|
103
|
float:left;
|
104
|
}
|
105
|
|
106
|
#subMenusContainer li{
|
107
|
list-style: none;
|
108
|
}
|
109
|
|
110
|
/* main menu ul or ol elment */
|
111
|
#nav{
|
112
|
display:block;
|
113
|
position: absolute;
|
114
|
list-style:none;
|
115
|
margin:0 0 0 0;
|
116
|
z-index:5;
|
117
|
top:15px;
|
118
|
left:50%;
|
119
|
text-align: center;
|
120
|
display:block;
|
121
|
}
|
122
|
|
123
|
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
|
124
|
|
125
|
|