dropdown menu wel in ie7 niet in ie6 [Archief]

lepie

%Europe/Berlin %822 %2008, 20:44

beste..

ik heb een vraag als ik me site http://www.restaurant-halfweg.nl open in ie7 is er niks aan de hand maar als ikhem open in ie6, en je gaat met je muis over menu ( dorpdouwn menu) werkt het maar als je ergens op wil klikken vliegt het weer weg. ik heb ergens gelezen dat je geen hover kon gebruiken in een div bij ie6. is hier een oplossing voor??

leon

<body>

<div id="layout">
<div id="banner"><img src="images/banner.gif" width="700" height="220" alt=""></div>
<div id="tekst-vak">
<p><img src="images/tekst-vak.gif" width="700" height="490"></p>
</div>
<div class="style2" id="textvak">

<div align="center" class="style2">
<p class=" style3"> </p>
<p class=" style3"> </p>
<p class="style1"> </p>
<p class="style1"> </p>
<p class="style1">Welkom op de website van<br />
Eetcafé Halfweg </p>
<p class="style2"> </p>
</div>
</div>

<div id="achtergrondmenu"></div>
<div id="Layer1">
<ul id="nav">
<li>
<div align="center"><a href="/index.html" class="menu">home</a></div>
</li>
<li>
<div align="center"><a href="/menu.html" class="menu">menu</a></div>
<ul>
<li>
<div align="center"><a href="voorgerechten.html">voorgerechten</a></div>
</li>
<li>
<div align="center"><a href="hoofdgerechten.html">hoofdgerechten</a></div>
</li>
<li>
<div align="center"><a href="nagerechten.html">nagerechten</a></div>
</li
>
<li>
<div align="center"><a href="plategerechten.html">plate gerechten</a></div>
</li>
<li>
<div align="center"><a href="lunchkaart.html">lunchkaart</a></div>
</li>
<li>
<div align="center"><a href="arrangement.html">arrangementen eten</a></div>
</li>
<li>
<div align="center"><a href="arrangementen.html">arrangementen feest</a></div>
</li>
</ul>
<ul>
</ul>
</li>
<li>
<div align="center"><a href="/geschiedenis.html" class="menu">geschiedenis</a></div>
</li>
<li>
<div align="center"><a href="gastenboek.html" target="_top" class="menu">gastenboek</a></div>
</li>
<li>
<div align="center"><a href="/fotoalbum.html" class="menu">foto album</a></div>
</li>
<li>
<div align="center"><a href="/route.html" class="menu">route</a></div>
</li>
<li>
<div align="center"><a href="contact.html" class="menu">contact</a></div>
</li>
</ul>
</div>
</div>


een stukje javascript

<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>

en een enorme lap css ( layout css zal ik u besparen )

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: 99px;
}

#nav ul {
position:relative;
width: 99px;
left: -1000px;
top: 16px;
}

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}

#nav a {
display: block;
}

/*submenu opmaak border zijn de randen, backround is de achtergrond kleur*/
ul ul a:link, ul ul a:visited {
font-weight: normal;
/*text kleur van de link*/
color:#000000;
cursor:default;
padding: 2px 2px 2px 2px;
border-top: 1px solid #dac416;
border-bottom: 1px solid #f7ea81;
border-left: 1px solid #dac416;
border-right: 1px solid #f7ea81;
background-color: #f6e664;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

ul ul a:hover, ul ul a:active {
font-weight: normal;
/*text kleur van hover submenu border zijn de randen, backround is de achtergrond kleur*/
color:#FF0000;
cursor:default;
padding: 2px 2px 2px 2px;
border-top: 1px solid #dac416;
border-bottom: 1px solid #f7ea81;
border-left: 1px solid #dac416;
border-right: 1px solid #f7ea81;
background-color: #e6cd00;
}