dropdown menu verdwijnt achter content
Opbouw menu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul id="nav">
<li><a href="index.php?page=index">Home</a></li>
<li><a>Praktische informatie</a>
<ul>
<li><a class="sub">Tarieven<img class="pijl" src="img/arrow.gif" alt="pijl" border="0" /></a>
<ul>
<li><a href="index.php?page=tarieven">Tarieven consult</a></li>
<li><a href="index.php?page=prijs_cursus">Tarieven cursussen</a></li>
</ul>
</li>
<li><a href="index.php?page=data_locatie">Data & locatie cursussen</a></li>
<li><a href="index.php?page=aanmeldform">Aanmeldformulier</a></li>
<li><a href="index.php?page=contact">Contact</a></li>
<li><a href="index.php?page=links">Links</a></li>
</ul>
</li>
<li><a href="index.php?page=nieuws">Nieuws</a></li>
</ul>
<li><a href="index.php?page=index">Home</a></li>
<li><a>Praktische informatie</a>
<ul>
<li><a class="sub">Tarieven<img class="pijl" src="img/arrow.gif" alt="pijl" border="0" /></a>
<ul>
<li><a href="index.php?page=tarieven">Tarieven consult</a></li>
<li><a href="index.php?page=prijs_cursus">Tarieven cursussen</a></li>
</ul>
</li>
<li><a href="index.php?page=data_locatie">Data & locatie cursussen</a></li>
<li><a href="index.php?page=aanmeldform">Aanmeldformulier</a></li>
<li><a href="index.php?page=contact">Contact</a></li>
<li><a href="index.php?page=links">Links</a></li>
</ul>
</li>
<li><a href="index.php?page=nieuws">Nieuws</a></li>
</ul>
menu.css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
#nav {
background: #228b22;
margin-top: 0.25px;
padding: 0px 0px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
width: 903px;
z-index: 999;
}
#nav li {
float:left;
margin-right:0px;
}
#nav li a {
display:block;
padding: 8px 32px;
color:#024f18;
text-decoration:none;
font-size:18px;
text-align: center;
}
#nav li:hover a, #nav li a:hover {
z-index:999;
position:relative;
color:#ffffb9;
}
#nav li:hover {
position:relative;
z-index:999;
}
#nav li:hover > a {
color:#ffffb9;
}
#nav :hover ul {
position: absolute;
z-index: 999;
left:15px;
top:36px;
width:170px;
}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul, #nav :hover ul ul {
position:absolute;
z-index: 999;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}
#nav :hover ul :hover ul {
left:180px;
top:5px;
white-space:nowrap;
width:150px;
z-index:999;
}
#nav :hover ul li {
margin:-1px;
}
#nav :hover ul li a {
background: #ccff66;
padding: 7px 0px;
width: 180px;
color: #ffffb9;
font-size: 16px;
font-weight: normal;
}
#nav :hover ul li a.sub {
background: #ccff66 url(arrow.gif);
}
#nav :hover ul :hover {
color:#024f18;
}
#nav :hover ul :hover a.sub {
color:#024f18;
}
#nav :hover ul :hover ul li a {
width:160px;
padding:7px 0px;
background: #228b22;
color:#ffffb9;
}
#nav :hover ul :hover ul :hover {
color:#fff;
background: #228b22;
color:#024f18;
}
.pijl {
float: right;
z-index:9;
}
background: #228b22;
margin-top: 0.25px;
padding: 0px 0px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
width: 903px;
z-index: 999;
}
#nav li {
float:left;
margin-right:0px;
}
#nav li a {
display:block;
padding: 8px 32px;
color:#024f18;
text-decoration:none;
font-size:18px;
text-align: center;
}
#nav li:hover a, #nav li a:hover {
z-index:999;
position:relative;
color:#ffffb9;
}
#nav li:hover {
position:relative;
z-index:999;
}
#nav li:hover > a {
color:#ffffb9;
}
#nav :hover ul {
position: absolute;
z-index: 999;
left:15px;
top:36px;
width:170px;
}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul, #nav :hover ul ul {
position:absolute;
z-index: 999;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}
#nav :hover ul :hover ul {
left:180px;
top:5px;
white-space:nowrap;
width:150px;
z-index:999;
}
#nav :hover ul li {
margin:-1px;
}
#nav :hover ul li a {
background: #ccff66;
padding: 7px 0px;
width: 180px;
color: #ffffb9;
font-size: 16px;
font-weight: normal;
}
#nav :hover ul li a.sub {
background: #ccff66 url(arrow.gif);
}
#nav :hover ul :hover {
color:#024f18;
}
#nav :hover ul :hover a.sub {
color:#024f18;
}
#nav :hover ul :hover ul li a {
width:160px;
padding:7px 0px;
background: #228b22;
color:#ffffb9;
}
#nav :hover ul :hover ul :hover {
color:#fff;
background: #228b22;
color:#024f18;
}
.pijl {
float: right;
z-index:9;
}
Iemand een idee hoe ik dit menu ook in IE9 en lager zichtbaar krijg?
Toevoeging op 04/02/2014 20:56:58:
Oké, na een dag vechten ben ik er uit. Voor wie ook zo´n dropdown 3-level menu wil: De truc zit in de eerste layout.
De background moet niet gedefinieerd worden in #nav, maar in #nav li a.
Het werkt niet in IE6, maar die is ondertussen wel echt afgeschreven, en in IE7 is het niet echt mooi, maar werkt wel. Voor de rest gaat ie perfect.
Gewijzigd op 04/02/2014 20:52:56 door Tortuga web
Er zijn nog geen reacties op dit bericht.