dropdown menu probleem
een tijd geleden heb ik ook hulp gevraagd met een dropdown menu ik heb hem nu bijna klaar. maar ik zit nu met het volgende probleem.
Op website: www.rbvhoogeveen.nl ziet u het menu.
nu heb ik het volgende als u over de links gaat en dan gaat het in dit geval om de link vereniging komt er een drop down menu. als je met je muis naar het drop down gedeeldte gaat springt de hover weer weg bij vereniging. ik heb veel dingen al geprobeerd. door de hover te koppelen aan het drop down gedeeldte.
misschien doe ik het niet goed. Dus mijn vraag is weet iemand hoe ik het moet oplossen.
Hieronder zou ik de html en css posten
HTML:
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>R.B.V. Hoogeveen</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
</head>
<body>
<div id="wrapper"><!-- wrapper om hele site -->
<div id="bg-image"></div>
<div id="menu-balk"><!-- begin menu -->
<div id="navigatie">
<ul class="nav">
<li class="current">
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Home</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Vereniging</span>
<span class="rechter-tab"></span>
</a>
<ul>
<div class="sub"></div>
<li><a href="#">Geschiedenis</a></li>
<li><a href="#">Het Logo</a></li>
<li><a href="#">Bestuur</a></li>
<li><a href="#">Geschiedenis</a></li>
<div class="sub-onder"></div>
</ul>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Teams</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Gallery</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Gastenboek</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Contact</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
</ul>
</div>
</div><!-- einde menu -->
</div><!-- einde wrapper site -->
</body>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>R.B.V. Hoogeveen</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
</head>
<body>
<div id="wrapper"><!-- wrapper om hele site -->
<div id="bg-image"></div>
<div id="menu-balk"><!-- begin menu -->
<div id="navigatie">
<ul class="nav">
<li class="current">
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Home</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Vereniging</span>
<span class="rechter-tab"></span>
</a>
<ul>
<div class="sub"></div>
<li><a href="#">Geschiedenis</a></li>
<li><a href="#">Het Logo</a></li>
<li><a href="#">Bestuur</a></li>
<li><a href="#">Geschiedenis</a></li>
<div class="sub-onder"></div>
</ul>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Teams</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Gallery</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Gastenboek</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Contact</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
</ul>
</div>
</div><!-- einde menu -->
</div><!-- einde wrapper site -->
</body>
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
/* om stippel lijn weg te halen */
.nav a:focus {outline: 0;}
.nav a:active {outline: 0;}
/* ---------------- */
/* div om menu heen */
#navigatie {
position: absolute;
width: auto;
height: auto;
margin-top: 10px;
}
/* ---------------- */
.nav, nav ul {
position: relative;
left: 4px;
padding: 0;
margin: 0;
list-style: none;
}
.nav li {
position: relative;
float: left;
list-style: none;
margin-left: 15px;
}
/* stijlen van link */
.nav li a {
font-family: Calibri;
font-size: 16px;
text-decoration: none;
}
/* ---------------- */
/* curve tabs om links */
.nav li span.linker-tab {
background: url(../images/menu-links.png) left top no-repeat;
height: 32px;
float: left;
padding-left: 5px;
}
.nav li span.midden {
color: #fff;
background: url(../images/menu-midden.png) repeat-x;
height: 31px;
width: auto;
float: left;
margin-top: 1px;
}
.nav li span.rechter-tab {
background: url(../images/menu-rechts.png) right top no-repeat;
height: 32px;
float: left;
padding-right: 5px;
}
/* ---------------- */
/* hover menu */
.nav li a:hover span.linker-tab {
background: url(../images/menu-hover-links.png) left top no-repeat;
height: 32px;
float: left;
padding-left: 5px;
}
.nav li a:hover span.midden {
color: #419fff;
background: url(../images/hover-midden.png) repeat-x;
height: 31px;
width: auto;
float: left;
margin-top: 1px;
}
.nav li a:hover span.rechter-tab {
background: url(../images/menu-hover-rechts.png) right top no-repeat;
height: 32px;
float: left;
padding-right: 5px;
}
/* ---------------- */
/* tussen stuk menu */
.split {
background: url(../images/split.png);
height: 31px;
width: 2px;
position: relative;
left: 7px;
top: -3px;
float: left;
}
/* ---------------- */
/* current */
.nav li.current span.linker-tab {
background: url(../images/menu-hover-links.png) left top no-repeat;
height: 32px;
float: left;
padding-left: 5px;
}
.nav li.current span.midden {
color: #419fff;
background: url(../images/hover-midden.png) repeat-x;
height: 31px;
width: auto;
float: left;
margin-top: 1px;
}
.nav li.current span.rechter-tab {
background: url(../images/menu-hover-rechts.png) right top no-repeat;
height: 32px;
float: left;
padding-right: 5px;
}
/* ---------------- */
/* begin dropdown */
/* boven kant dropdown menu met curve */
ul.nav ul .sub {
z-index: 1;
position: absolute;
background: url(../images/sub-menu-top.png) no-repeat;
width: 185px;
height: 9px;
left: 0px;
top: -6px;
}
/* ---------------- */
/* dropdown*/
ul.nav ul {
background: url(../images/sub-menu-midden.png) repeat-y;
width: 145px;
height: auto;
z-index: 1;
position: absolute;
top: 32px;
margin-left: 1px;
/* verbergt submenu */
visibility: hidden;
}
/* ---------------- */
/* instellen weergave submenu */
ul.nav li:hover ul {
visibility: visible;
}
/* ---------------- */
ul.nav ul li {
width: 160px;
margin: 0;
padding-left: 2px;
line-height: 30px;
margin-left: -30px;
border-bottom: 1px dashed #419fff;
}
/* stijlen van sublink */
.nav li ul a {
color: #419fff;
font-family: Calibri;
font-size: 14px;
text-decoration: none;
display: block;
}
/* ---------------- */
.nav a:focus {outline: 0;}
.nav a:active {outline: 0;}
/* ---------------- */
/* div om menu heen */
#navigatie {
position: absolute;
width: auto;
height: auto;
margin-top: 10px;
}
/* ---------------- */
.nav, nav ul {
position: relative;
left: 4px;
padding: 0;
margin: 0;
list-style: none;
}
.nav li {
position: relative;
float: left;
list-style: none;
margin-left: 15px;
}
/* stijlen van link */
.nav li a {
font-family: Calibri;
font-size: 16px;
text-decoration: none;
}
/* ---------------- */
/* curve tabs om links */
.nav li span.linker-tab {
background: url(../images/menu-links.png) left top no-repeat;
height: 32px;
float: left;
padding-left: 5px;
}
.nav li span.midden {
color: #fff;
background: url(../images/menu-midden.png) repeat-x;
height: 31px;
width: auto;
float: left;
margin-top: 1px;
}
.nav li span.rechter-tab {
background: url(../images/menu-rechts.png) right top no-repeat;
height: 32px;
float: left;
padding-right: 5px;
}
/* ---------------- */
/* hover menu */
.nav li a:hover span.linker-tab {
background: url(../images/menu-hover-links.png) left top no-repeat;
height: 32px;
float: left;
padding-left: 5px;
}
.nav li a:hover span.midden {
color: #419fff;
background: url(../images/hover-midden.png) repeat-x;
height: 31px;
width: auto;
float: left;
margin-top: 1px;
}
.nav li a:hover span.rechter-tab {
background: url(../images/menu-hover-rechts.png) right top no-repeat;
height: 32px;
float: left;
padding-right: 5px;
}
/* ---------------- */
/* tussen stuk menu */
.split {
background: url(../images/split.png);
height: 31px;
width: 2px;
position: relative;
left: 7px;
top: -3px;
float: left;
}
/* ---------------- */
/* current */
.nav li.current span.linker-tab {
background: url(../images/menu-hover-links.png) left top no-repeat;
height: 32px;
float: left;
padding-left: 5px;
}
.nav li.current span.midden {
color: #419fff;
background: url(../images/hover-midden.png) repeat-x;
height: 31px;
width: auto;
float: left;
margin-top: 1px;
}
.nav li.current span.rechter-tab {
background: url(../images/menu-hover-rechts.png) right top no-repeat;
height: 32px;
float: left;
padding-right: 5px;
}
/* ---------------- */
/* begin dropdown */
/* boven kant dropdown menu met curve */
ul.nav ul .sub {
z-index: 1;
position: absolute;
background: url(../images/sub-menu-top.png) no-repeat;
width: 185px;
height: 9px;
left: 0px;
top: -6px;
}
/* ---------------- */
/* dropdown*/
ul.nav ul {
background: url(../images/sub-menu-midden.png) repeat-y;
width: 145px;
height: auto;
z-index: 1;
position: absolute;
top: 32px;
margin-left: 1px;
/* verbergt submenu */
visibility: hidden;
}
/* ---------------- */
/* instellen weergave submenu */
ul.nav li:hover ul {
visibility: visible;
}
/* ---------------- */
ul.nav ul li {
width: 160px;
margin: 0;
padding-left: 2px;
line-height: 30px;
margin-left: -30px;
border-bottom: 1px dashed #419fff;
}
/* stijlen van sublink */
.nav li ul a {
color: #419fff;
font-family: Calibri;
font-size: 14px;
text-decoration: none;
display: block;
}
/* ---------------- */
