| 1 |
|
body {
|
| 2 |
|
behavior:url("css/csshover.htc");
|
| 3 |
|
}
|
| 4 |
|
|
| 5 |
|
#menu {
|
| 6 |
|
width:99.8%;
|
| 7 |
|
float:left;
|
| 8 |
|
background:url(../image/bg_css_menu.png) repeat bottom;
|
| 9 |
|
border:1px solid;
|
| 10 |
|
border-color:#ccc #888 #555 #bbb;
|
| 11 |
|
}
|
| 12 |
|
|
| 13 |
|
#menu a, #menu h2, #menu div.x {
|
| 14 |
|
font:11px/16px arial,helvetica,sans-serif;
|
| 15 |
|
display:block;
|
| 16 |
|
border:0;
|
| 17 |
|
border-right:1px;
|
| 18 |
|
border-style:solid;
|
| 19 |
|
border-color:#ccc #888 #555 #bbb;
|
| 20 |
|
white-space:nowrap;
|
| 21 |
|
margin:0;
|
| 22 |
|
padding:1px 0 1px 3px;
|
| 23 |
|
}
|
| 24 |
|
|
| 25 |
|
#menu h2 {
|
| 26 |
|
color:#fff;
|
| 27 |
|
padding:0 5px;
|
| 28 |
|
}
|
| 29 |
|
|
| 30 |
|
#menu a, #menu a:visited, #menu div.x, #menu div.x:visited {
|
| 31 |
|
color:#000;
|
| 32 |
|
text-decoration:none;
|
| 33 |
|
padding-right:10px;
|
| 34 |
|
}
|
| 35 |
|
|
| 36 |
|
#menu a {
|
| 37 |
|
background:#eee;
|
| 38 |
|
}
|
| 39 |
|
|
| 40 |
|
#menu div.x, #menu div.x:visited {
|
| 41 |
|
background:#eee url(../image/right.gif) no-repeat right;
|
| 42 |
|
}
|
| 43 |
|
|
| 44 |
|
#menu a:hover, #menu div.x:hover {
|
| 45 |
|
color:#a00;
|
| 46 |
|
background-color:#ddd;
|
| 47 |
|
}
|
| 48 |
|
|
| 49 |
|
#menu a:active, #menu div.x:active {
|
| 50 |
|
color:#060;
|
| 51 |
|
background-color:#ccc;
|
| 52 |
|
}
|
| 53 |
|
|
| 54 |
|
#menu ul {
|
| 55 |
|
list-style:none;
|
| 56 |
|
margin:0;
|
| 57 |
|
padding:0;
|
| 58 |
|
float:left;
|
| 59 |
|
min-width:7em;
|
| 60 |
|
}
|
| 61 |
|
|
| 62 |
|
#menu li {
|
| 63 |
|
position:relative;
|
| 64 |
|
float:none;
|
| 65 |
|
border:0;
|
| 66 |
|
}
|
| 67 |
|
|
| 68 |
|
/* IE6 spacing bug fix, <li>s without a bottom border get spaced to far
|
| 69 |
|
* correction: the bug will change the height of the parent element! this will also cause the whole menu to grow
|
| 70 |
|
* so the only method to get this pile of crap going is to add a bottom border to the <li>s, where the enclosing <ul> already has
|
| 71 |
|
* a bottom border, which just looks ugly
|
| 72 |
|
* the trick: color the bottom border with the same color as the bottom pixel of the background image - noone notices */
|
| 73 |
|
#menu ul li {
|
| 74 |
|
border:solid;
|
| 75 |
|
border-color:#ccd5e5;
|
| 76 |
|
border-width:0 0 1px 0;
|
| 77 |
|
}
|
| 78 |
|
|
| 79 |
|
#menu ul ul li {
|
| 80 |
|
border:solid;
|
| 81 |
|
border-width:0 0 1px 0;
|
| 82 |
|
}
|
| 83 |
|
|
| 84 |
|
/* IE6 event bug fix, without a background there hovers will be occassionally lost between the li's to the layer below
|
| 85 |
|
* causing the menu to close. Opera 9 has the same bug btw. */
|
| 86 |
|
#menu ul ul {
|
| 87 |
|
position:absolute;
|
| 88 |
|
z-index:500;
|
| 89 |
|
top:auto;
|
| 90 |
|
display:none;
|
| 91 |
|
background:#000;
|
| 92 |
|
}
|
| 93 |
|
|
| 94 |
|
#menu ul ul ul {
|
| 95 |
|
top:0;
|
| 96 |
|
left:100%;
|
| 97 |
|
background:#000;
|
| 98 |
|
}
|
| 99 |
|
|
| 100 |
|
/* Begin non-anchor hover selectors */
|
| 101 |
|
|
| 102 |
|
/* Enter the more specific element (div) selector
|
| 103 |
|
on non-anchor hovers for IE5.x to comply with the
|
| 104 |
|
older version of csshover.htc - V1.21.041022. It
|
| 105 |
|
improves IE's performance speed to use the older
|
| 106 |
|
file and this method */
|
| 107 |
|
|
| 108 |
|
div#menu h2:hover {
|
| 109 |
|
background:#A3C5FF;
|
| 110 |
|
color:#a00;
|
| 111 |
|
}
|
| 112 |
|
|
| 113 |
|
div#menu li:hover {
|
| 114 |
|
cursor:pointer;
|
| 115 |
|
z-index:100;
|
| 116 |
|
}
|
| 117 |
|
|
| 118 |
|
div#menu li:hover ul ul,
|
| 119 |
|
div#menu li li:hover ul ul,
|
| 120 |
|
div#menu li li li:hover ul ul,
|
| 121 |
|
div#menu li li li li:hover ul ul
|
| 122 |
|
{display:none;}
|
| 123 |
|
|
| 124 |
|
div#menu li:hover ul,
|
| 125 |
|
div#menu li li:hover ul,
|
| 126 |
|
div#menu li li li:hover ul,
|
| 127 |
|
div#menu li li li li:hover ul
|
| 128 |
|
{display:block;}
|
| 129 |
|
|
| 130 |
|
/* End of non-anchor hover selectors */
|
| 131 |
|
|
|
1 |
body {
|
|
2 |
behavior:url("css/csshover.htc");
|
|
3 |
}
|
|
4 |
|
|
5 |
#menu {
|
|
6 |
width:99.8%;
|
|
7 |
float:left;
|
|
8 |
background:url(../image/bg_css_menu.png) repeat bottom;
|
|
9 |
border:1px solid;
|
|
10 |
border-color:#ccc #888 #555 #bbb;
|
|
11 |
}
|
|
12 |
|
|
13 |
#menu a, #menu h2, #menu div.x {
|
|
14 |
font:11px/16px arial,helvetica,sans-serif;
|
|
15 |
display:block;
|
|
16 |
border:0;
|
|
17 |
border-right:1px;
|
|
18 |
border-style:solid;
|
|
19 |
border-color:#ccc #888 #555 #bbb;
|
|
20 |
white-space:nowrap;
|
|
21 |
margin:0;
|
|
22 |
padding:1px 0 1px 3px;
|
|
23 |
}
|
|
24 |
|
|
25 |
#menu h2:before {
|
|
26 |
content:" ";
|
|
27 |
}
|
|
28 |
#menu h2:after {
|
|
29 |
content:" ";
|
|
30 |
}
|
|
31 |
#menu h2 {
|
|
32 |
color:#fff;
|
|
33 |
padding:2 15px
|
|
34 |
}
|
|
35 |
|
|
36 |
#menu a, #menu a:visited, #menu div.x, #menu div.x:visited {
|
|
37 |
color:#000;
|
|
38 |
text-decoration:none;
|
|
39 |
padding-right:10px;
|
|
40 |
}
|
|
41 |
|
|
42 |
#menu a {
|
|
43 |
background:#eee;
|
|
44 |
}
|
|
45 |
#menu div.x, #menu div.x:visited {
|
|
46 |
background:#eee url(../image/right.gif) no-repeat right;
|
|
47 |
}
|
|
48 |
|
|
49 |
#menu a:hover, #menu div.x:hover {
|
|
50 |
color:#a00;
|
|
51 |
background-color:#ddd;
|
|
52 |
}
|
|
53 |
|
|
54 |
#menu a:active, #menu div.x:active {
|
|
55 |
color:#060;
|
|
56 |
background-color:#ccc;
|
|
57 |
}
|
|
58 |
|
|
59 |
#menu ul {
|
|
60 |
list-style:none;
|
|
61 |
margin:0;
|
|
62 |
padding:0;
|
|
63 |
float:left;
|
|
64 |
}
|
|
65 |
|
|
66 |
#menu li {
|
|
67 |
position:relative;
|
|
68 |
float:none;
|
|
69 |
border:0;
|
|
70 |
}
|
|
71 |
|
|
72 |
li.sub {
|
|
73 |
position:relativ;
|
|
74 |
left:-25px;
|
|
75 |
top:-3px;
|
|
76 |
}
|
|
77 |
|
|
78 |
/* IE6 spacing bug fix, <li>s without a bottom border get spaced to far
|
|
79 |
* correction: the bug will change the height of the parent element! this will also cause the whole menu to grow
|
|
80 |
* so the only method to get this pile of crap going is to add a bottom border to the <li>s, where the enclosing <ul> already has
|
|
81 |
* a bottom border, which just looks ugly
|
|
82 |
* the trick: color the bottom border with the same color as the bottom pixel of the background image - noone notices */
|
|
83 |
#menu ul li {
|
|
84 |
border:solid;
|
|
85 |
border-color:#ccd5e5;
|
|
86 |
border-width:0 0 1px 0;
|
|
87 |
}
|
|
88 |
|
|
89 |
#menu ul ul li {
|
|
90 |
border:solid;
|
|
91 |
border-width:0 0 1px 0;
|
|
92 |
}
|
|
93 |
|
|
94 |
/* IE6 event bug fix, without a background there hovers will be occassionally lost between the li's to the layer below
|
|
95 |
* causing the menu to close. Opera 9 has the same bug btw. */
|
|
96 |
#menu ul ul {
|
|
97 |
position:absolute;
|
|
98 |
z-index:500;
|
|
99 |
top:auto;
|
|
100 |
display:none;
|
|
101 |
}
|
|
102 |
|
|
103 |
#menu ul ul ul {
|
|
104 |
top:0;
|
|
105 |
left:100%;
|
|
106 |
}
|
|
107 |
|
|
108 |
/* Begin non-anchor hover selectors */
|
|
109 |
|
|
110 |
/* Enter the more specific element (div) selector
|
|
111 |
on non-anchor hovers for IE5.x to comply with the
|
|
112 |
older version of csshover.htc - V1.21.041022. It
|
|
113 |
improves IE's performance speed to use the older
|
|
114 |
file and this method */
|
|
115 |
|
|
116 |
div#menu h2:hover {
|
|
117 |
background:#A3C5FF;
|
|
118 |
color:#a00;
|
|
119 |
}
|
|
120 |
|
|
121 |
div#menu li:hover {
|
|
122 |
cursor:pointer;
|
|
123 |
z-index:100;
|
|
124 |
}
|
|
125 |
|
|
126 |
div#menu li:hover ul ul,
|
|
127 |
div#menu li li:hover ul ul,
|
|
128 |
div#menu li li li:hover ul ul,
|
|
129 |
div#menu li li li li:hover ul ul
|
|
130 |
{display:none;}
|
|
131 |
|
|
132 |
div#menu li:hover ul,
|
|
133 |
div#menu li li:hover ul,
|
|
134 |
div#menu li li li:hover ul,
|
|
135 |
div#menu li li li li:hover ul
|
|
136 |
{display:block; position:relativ: left:10px;}
|
|
137 |
|
|
138 |
/* End of non-anchor hover selectors */
|
|
139 |
|
Durch feste Breite und viele Einträge bricht das Menü um.
Sieht scheusslich aus. Auch sind die Untermenüs oft schlecht zu treffen.
Feste Breite entfernt, dafür seitliches Padding erhöht
Untermenüs überlappen das Hauptmenü.