Hallo,
Ik gebruik voor een website een list menu in combinatie met CSS. In firefox werkt dit menu prima, maar ik IE6 klapt het menu niet uit als je erover heen gaat. Het menu is validated XHTML dus daar zal het niet aan liggen.
Dit is het CSS script:
Het XHTML script:
Wie kan mij helpen? Alvast bedankt!
Ik gebruik voor een website een list menu in combinatie met CSS. In firefox werkt dit menu prima, maar ik IE6 klapt het menu niet uit als je erover heen gaat. Het menu is validated XHTML dus daar zal het niet aan liggen.
Dit is het CSS script:
Code:
.menu {
margin: 10px;
height: 100px;
font-size: 10pt;
font-family: arial;
}
.menu ul {
margin: 0pt;
padding: 0pt;
position: relative;
z-index: 500;
list-style-type: none;
width: 13em;
}
.menu li {
background-color: #330099;
float: left;
}
.menu table {
position: absolute;
border-collapse: collapse;
top: 10pt;
left: 10pt;
z-index: 100;
font-size: 1em;
margin-top: -1px;
}
.menu a, .menu a:visited {
border: 1px solid #ffffff;
display: block;
text-decoration: none;
height: 2em;
line-height: 2em;
width: 13em;
color: #ffffff;
padding-left: 1em;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.menu b {
float: right;
margin-right: 5px;
}
.menu li:hover {
position: relative;
}
.menu a:active, .menu a:focus {
color: #ffffff;
background-color: #330066;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li:hover > a {
color: #ffffff;
background-color: #330066;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li ul {
padding: 2em;
visibility: hidden;
position: absolute;
top: -2em;
left: 12em;
background-color: transparent;
}
.menu li:hover > ul {
visibility: visible;
}
.menu ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul a:hover ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
Het XHTML script:
Code:
<div id="menu" class="menu">
<ul>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
<li><a href=""><b>»</b>xxxxx</a>
<ul>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
</ul>
</li>
<li><a href=""><b>»</b>xxxxx</a>
<ul>
<li><a href="link.php">xxxxxn</a></li>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
<li><a href=""><b>»</b>xxxxx</a>
<ul>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php" target="_blank">xxxxx</a></li></ul></li>
</ul>
</li>
<li><a href=""><b>»</b>xxxxx</a>
<ul>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
</ul>
</li>
<li><a href=""><b>»</b>xxxxx</a>
<ul>
<li><a href="link.php">xxxxxt</a></li>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
</ul>
</li>
<li><a href=""><b>»</b>xxxxx</a>
<ul>
<li><a href="link.php">xxxxx</a></li>
<li><a href=""><b>»</b>xxxxx</a>
<ul>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
</ul>
</li>
<li><a href=""><b>»</b>xxxxx</a>
<ul>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
</ul>
</li>
<li><a href="link.php">xxxxx</a></li>
</ul>
</li>
<li><a href=""><b>»</b>xxxxxx</a>
<ul>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxxr</a></li>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
</ul>
</li>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
<li><a href="link.php">xxxxx</a></li>
</ul>
</div>
Laatst bewerkt: