CSS Dropdown menu probleem
Zodra ik met m'n muis over een menu item ga komen de onderstaande items wel tevoorschijn maar deze verdwijnen weer zodra ik met mn muis van het menu item af ga...
Weet iemand misschien wat het probleem is en hoe ik dit kan oplossen?
Dit is de code:
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<title>Menu</title>
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div>
<center>
<ul id="nav">
<li><a href="index.php">Home</a>
</li>
<li><a href="contact.php">Contact</a>
</li>
<li><a href="about.php">The Band</a>
</li>
<li><a href="calendar.php">Gigs</a>
</li>
<li><a href="#">Interaction</a>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="guestbook.php">Guestbook</a></li>
</ul>
</li>
<li><a href="#">Media</a>
<ul>
<li><a href="#">Images</a></li>
<li><a href="#">Video's</a></li>
<li><a href="#">Music</a></li>
</ul>
</li>
</ul>
</center>
</div>
<br id="clearit" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<title>Menu</title>
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div>
<center>
<ul id="nav">
<li><a href="index.php">Home</a>
</li>
<li><a href="contact.php">Contact</a>
</li>
<li><a href="about.php">The Band</a>
</li>
<li><a href="calendar.php">Gigs</a>
</li>
<li><a href="#">Interaction</a>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="guestbook.php">Guestbook</a></li>
</ul>
</li>
<li><a href="#">Media</a>
<ul>
<li><a href="#">Images</a></li>
<li><a href="#">Video's</a></li>
<li><a href="#">Music</a></li>
</ul>
</li>
</ul>
</center>
</div>
<br id="clearit" />
</body>
</html>
en de 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
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
@charset "utf-8";
/* CSS Document */
/* ------------------------------- Menu Opmaak ------------------------------- */
#nav, #nav ul {
padding: 3px 0 0 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
width: 120px;
}
#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}
#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}
#nav a {
display: block;
margin: 2px 5px 3px 5px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
ul a{
font-weight: bold;
color: #F60;
cursor: default;
}
ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #CCC;
cursor: pointer;
}
ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
}
ul li{
background-color: #CCC;
border-left: 3px solid #FFF;
}
ul ul li{
background-color: #666;
border-top: 3px solid #FFF;
border-left: 0;
}
br:clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid #FFF;
}
* html ul ul li{
border-top: 0;
}
/* Einde IE only hack */
[/css]
/* CSS Document */
/* ------------------------------- Menu Opmaak ------------------------------- */
#nav, #nav ul {
padding: 3px 0 0 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
width: 120px;
}
#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}
#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}
#nav a {
display: block;
margin: 2px 5px 3px 5px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
ul a{
font-weight: bold;
color: #F60;
cursor: default;
}
ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #CCC;
cursor: pointer;
}
ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
}
ul li{
background-color: #CCC;
border-left: 3px solid #FFF;
}
ul ul li{
background-color: #666;
border-top: 3px solid #FFF;
border-left: 0;
}
br:clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid #FFF;
}
* html ul ul li{
border-top: 0;
}
/* Einde IE only hack */
[/css]
Gewijzigd op 01/01/1970 01:00:00 door Frank
Er zijn nog geen reacties op dit bericht.