Ik heb veel gelezen dat dit niet werkt, maar een passende oplossing heb ik niet kunnen vinden.. Is er iemand die mij kan vertellen hoe ik het IE6 probleem voor mijn menu kan oplossen?
HTML
<body>
<div id="menucontainer">
<div id="menu">
<p> </p>
<ul>
<li id="li1">
<ul>
<li id="li1-2"><a>Business</a></li>
</ul>
</li>
<li id="li2">
<ul>
<li id="li2-2"><a>Reflexologie</a></li>
</ul>
</li>
<li id="li3">
<ul>
<li id="li3-2"><a>Lypossage</a></li>
</ul>
</li>
<li id="li4">
<ul>
<li id="li4-2"><a>Workshops</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
CSS
#menucontainer {
position:absolute;
width:350px;
left:50%;
margin-left:-175px;
float:left;
}
#menu a {
display:block;
color:#FFFFFF;
font-weight:600px;
text-align:center;
}
#menu ul li {
display:block;
position:relative;
list-style:none;
margin:3px;
padding:0px;
float:left;
height:15px;
}
#menu ul ul {
display:none;
}
#menu li:hover ul {
display:block;
position:relative;
left:0px;
top:-23px;
height:auto;
margin:0px;
padding:0px;
left:39px;
}
#li1 {
background-color:#336666;
width:60px;
}
#li1-2 {
background-color:#336666;
position:absolute;
left:-42px;
width:257px;
}
#li2 {
background-color:#FFcc66;
width:60px;
}
#li2-2 {
background-color:#FFcc66;
left:-109px;
width:257px;
}
#li3 {
background-color:#999933;
width:60px;
}
#li3-2 {
background-color:#999933;
width:257px;
left:-174px;
}
#li4 {
background-color:#3399cc;
width:60px;
}
#li4-2 {
background-color:#3399cc;
width:257px;
left:-240px;
}
<!--[if gt IE 5.0]><![if lt IE 7]>
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
#menu li { /* the behaviour to mimic the li:hover rules in IE 5+ */
behavior: url( IEmen.htc );
}
#menu ul ul { /* copy of above declaration without the > selector, except left position is wrong */
display: none; position: absolute; top: 2px; left: 78px;
}
</style>
<![endif]><![endif]-->
