Moin auch,
ich leg mal wieder meinen Kopf auf die Tischplatte.
Ich bastel gerade an einem CSS /Js Dropdown Menü.
Das Problem ist, daß die Untermenüs im IE nicht wieder schließen, bzw falsch positioniert sind.
Fehlerhafte Darstellung durch faschen Doctype schließe ich aus, mehrere Varianten versucht.
Hier der Quelltext:
HTML-Code:
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);</script>
<li><a href="index.php">Startseite</a></li>
<li><a href="#"> Der Club</a>
<ul>
<li><a href="clubinfo.php">Informationen zum Club</li>
<li><a href="trainingszeiten.php">Trainingszeiten</li>
<li><a href="preise.php">Preise</li>
<li><a href="forschungsstudie.php">Forschungsstudie</li>
</ul>
</li>
<li><a href="#">Das Team</a>
<ul>
<li><a href="kernteam.php">Kernteam</a></li>
<li><a href="karriere.php">Karriere</a></li>
</ul>
</li>
<li><a href="#">Historie</a>
<ul>
<li><a href="historie.php">Boxgeschichte</a></li>
<li><a href="wcbc_historie.php">White Collar Boxing</a></li>
</ul>
</li>
<li><a href="#">Galerie</a>
<ul>
<li><a href="galerie_meetings.php">Clubmeetings</a></li>
<li><a href="galerie_specials.php">Specials</a></li>
<li><a href="galerie_events.php">Veranstaltungen</a></li>
</ul>
</li>
<li><a href="#">Veranstaltungen</a>
<ul>
<li><a href="#">Termine</a></li>
<li><a href="veranstaltungen_archiv.php">Archiv</a></li>
<li><a href="/shop/index.php">Ticket-Shop</a></li>
</ul>
</li>
<li><a href="#">Personal Training</a>
<ul>
<li><a href="box_fitnesstraining.php">Box- und Fitnesstraining</a></li>
<li><a href="mentalcoaching.php">Mental-Coaching</a></li>
<li><a href="preisliste_personal_training.php">Preise</li>
<li><a href="warum_personal_training.php">Warum Personal Training</a></li>
</ul>
</li>
Das script wird per include an die richtige Stelle geladen.
Dazu natürlich mein CSS:
Code:
#nav a {
display: block;
color:#ffffff;
text-decoration:none;
background-color:transparent;
margin-top:4px;
width:100%;
display: block;
}
#nav li {
float:left;
padding-left:10px;
background-color:#transparent;
height:35px;
width:auto;
}
#nav li ul li{
margin:0px;
padding:0px;
padding-top:0px;
height:35px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
background-color:#959494;
text-indent:0.3em;
width:170px;
color:#333333;
display:block;
line-height:35px;
}
#nav li ul li a:hover{
margin:0px;
padding:0px;
padding-top:4px;
height:31px;
width:170px;
background-color:#141414;
color:#c3c1c1;
border-bottom:1px solid #990000;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Im FF und im Opera Browser alles chic und flauschig.
IE 6 und IE7 zicken rum.
Ich habe keine Ahnung an was das liegen könnte.
Ja, der Validator kotzt, weiß ich, aber hat jemand ne Idee?
Gruß und Danke schonmal,
Butterstulle
Hier ein Blick auf die Darstellung unter WinXp IE7:
