Ich habe in dynamisches Aufklappmenu was ich Netz gefunden habe in meine HP eingebaut. Wenn man auf den Hauptlink klickt öffnet sich darunter eine Box mit den Unterlinks. Nun habe ich ein Problem mit den hover Effekt bei den Unterlinks. Im FF klappt alles wunderbar. Im IE wechselt der 1. Unterlink noch die Farbe der zweit schon nicht mehr woran kann das liegen?
Für eure Hilfe wäre ich dankbar.
Nachstehen das Skript
Für eure Hilfe wäre ich dankbar.
Nachstehen das Skript
Code:
<?php header('Content-Language: de'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
font-family: arial, tahoma, helvetica, sans-serif;
font-size:12px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
width:100px;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 540px;
}
#menu dl {
float: left;
width: 100px;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border: 0px solid black;
width: 100px;
height: 20px;
}
#menu dd {
border: 0px solid gray;
width: 100px;
}
#menu li {
text-align: left;
background: #9FD7D6;
width: 100px;
padding: 3px;
font-family: arial, tahoma, helvetica, sans-serif;
font-size:11px;
}
#menu li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
margin-left:3px;
}
#menu li a {
color: #000000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
margin-left:3px;
}
#menu dt a:hover {
margin-left:3px;
color:#000000;
}
#menu li a:hover {
margin-left:3px;
color:#FFFFFF;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="index.php">Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');"><a href="unternehmen.php">Unternehmen</a></dt>
<dd id="smenu1">
<ul>
<li><a href="unternehmen.php">Unternehmen</a></li>
<li><a href="mitarbeiter.php">Mitarbeiter</a></li>
<li><a href="zertifizierung.php">Zertifizierung</a></li>
<li><a href="verbaende.php">Verbände</a></li>
<li><a href="agb.php">AGB´s</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><a href="erdwaerme.php">Erdwärme</a></dt>
<dd id="smenu2">
<ul>
<li><a href="erdwaerme.php">Erdwärme</a></li>
<li><a href="waermepumpe.php">Wärmepumpe</a></li>
<li><a href="erdwaerme_bohrung.php">Erdwärmebohrung</a></li>
<li><a href="foerdermittel.php">Fördermittel</a></li>
<li><a href="referenzen_erdwaerme.php">Referenzobjekte</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');"><a href="brunnenbohrung.php">Brunnen</a></dt>
<dd id="smenu3">
<ul>
<li><a href="brunnenbohrung.php">Brunnenbohrung</a></li>
<li><a href="brunnenausbau.php">Brunnenausbau</a></li>
<li><a href="brunnentechnik.php">Brunnentechnik</a></li>
<li><a href="referenzen_brunnen.php">Referenzobjekte</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');"><a href="kontakt.php">Kontaktformular</a></dt>
</dl>
</div>
</body>
</html>