Hallo,
ich bekomme im IE (7) einfach kein Dropdown-Menü in CSS hin. Ich habe mir das Menü auf spiegel.de als Vorlage rausgepickt und angepasst, aber an irgend einer Stelle wohl zuviel rausgenommen. Mein Versuch funktioniert zwar im Firefox, aber im IE nicht wie gewünscht. Dort klappt sich das Untermenü sofort wieder ein, sobald ich den oberen Menüpunkt verlasse. Das Untermenü soll aber erst ausgeblendet werden, wenn ich auch das Aufklappfeld selbst verlassen habe.
Die Frage ist jetzt, warum der Firefox das wie gewünscht macht, der IE aber nicht. Ich komme einfach nicht dahinter. Vielleicht kann ja jemand helfen.
Hier der Link: http://www.fsv-optik.de/Menuetest
Und hier nochmal HTML und CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>MECON Media Concept Ltd.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
</head>
<body>
<ul class="menue">
<li class="menuepunkt"><a href="/">Home</a></li>
<li class="menuepunkt"><a href="/politik/">Saison</a>
<div class="menueDiv">
<ul class="untermenue" style="z-index:100;">
<li><a href="">Übersicht</a></li>
<li><a href="">Spielplan</a></li>
<li><a href="">Tabelle</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>
ul.menue li.menuepunkt {
float: left;
padding-right: 10px !important;
}
ul.menue li.menuepunkt .menueDiv {
position: relative;
}
ul.menue li.menuepunkt .menueDiv ul.untermenue {
list-style-type: none;
display: none;
position: absolute;
left: -40px;
z-index: 100;
padding-top: 0.07em !important;
}
ul.menue li.menuepunkt:hover ul.untermenue {
display: block;
}
/*nur Style*/
li {
list-style: none;
}
ul.menue li.menuepunkt .menueDiv ul.untermenue a,
ul.menue li.menuepunkt .menueDiv ul.untermenue a:hover {
/* text-decoration: none; */
display: block;
padding: 3px 5px !important;
min-width: 120px;
width: auto;
overflow: visible;
font-size: 0.625em;
line-height: 1.2em;
white-space: nowrap;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px dotted #CFCFCF;
color: #666;
background-color: rgb(250,250,250);
}
Besten Dank,
Onkel Schnitzel