Ik ben bezig met een menu, alleen heb ik nu het probleem dat het niet onder Internet Explorer werkt. Onder alle andere browsers (Mozilla, Opera, Konqueror) werkt het wel gewoon.
Ik heb nu op internet een script gevonden die het probleem in Internet Explorer zou moeten oplossen alleen het wil niet echt werken. Dit is het script, en hieronder mijn code..
Hier mijn html code:
En het CSS-bestand:
Ziet iemand misschien wat ik fout doe?
Ik heb nu op internet een script gevonden die het probleem in Internet Explorer zou moeten oplossen alleen het wil niet echt werken. Dit is het script, en hieronder mijn code..
Hier mijn html code:
code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Menu Test</title>
<link href="style.css" rel="stylesheet" />
<style type="text/css"> body { behavior:url("csshover.htc"); } </style>
</head>
<body>
<div class="menu">
<ul>
<li ><a href="link.html" title="Menu Item 1">Menu Item 1</a></li>
</ul>
<ul>
<li ><a href="link.html" title="Menu Item 2">Menu Item 2</a></li>
</ul>
<ul>
<li ><a href="link.html" title="Menu Item 3">Menu Item 3</a></li>
</ul>
<ul>
<li class="menu-submenu"><a href="link.html" title="Menu Item 4">Menu Item 4</a>
<ul>
<li ><a href="link.html" title="Menu Item 4.1">Menu Item 4.1</a></li>
<li ><a href="link.html" title="Menu Item 4.2">Menu Item 4.2</a></li>
<li ><a href="link.html" title="Menu Item 4.3">Menu Item 4.3</a></li>
<li class="menu-submenu"><a href="link.html" title="Menu Item 4.4">Menu Item 4.4</a>
<ul>
<li ><a href="link.html" title="Menu Item 4.4.1">Menu Item 4.4.1</a></li>
<li ><a href="link.html" title="Menu Item 4.4.2">Menu Item 4.4.2</a></li>
</ul>
</li>
<li ><a href="link.html" title="Menu Item 4.5">Menu Item 4.5</a></li>
<li ><a href="link.html" title="Menu Itme 4.6">Menu Item 4.6</a></li>
</ul>
</li>
</ul>
<ul>
<li ><a href="link.html" title="Menu Item 5">Menu Item 5</a></li>
</ul>
<ul>
<li ><a href="link.html" title="Menu Item 6">Menu Item 6</a></li>
</ul>
</div>
</body>
</html> |
En het CSS-bestand:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .menu { background: black; float: left; }
.menu a { color: white; text-decoration: none; font: 11px "Trebuchet MS", Helvetica }
.menu a:visited { color: white }
.menu a { display: block; margin: 0px; padding: 3px 1em; text-align: left; background: black; }
.menu li.menu-submenu > a { background: #8d8f88; }
.menu li:hover > a { background: #fff; color: #8d8f88; }
.menu li { position: relative; }
.menu ul { list-style-type: none; margin: 0; padding: 0; float: left; }
.menu ul ul { width: 7em; border: 1px solid black; position: absolute; z-index: 500; }
.menu ul ul { display: none; }
.menu ul ul ul { position: absolute; top: 0; left: 100%; }
.menu ul li:hover > ul { display: block; } |
Ziet iemand misschien wat ik fout doe?