Hi,
Ich habe ein kleines Problem.
Ich habe ein Dropdown-Menü in CSS aber im IE 6 wird dieses nicht korrekt angezeigt. Das Dropdown funktioniert gar nicht und manche Menüpunkte die mehrere Zeichen Haben werden manchmal sogar Mehrreihig angezeigt.
Im IE 7, Opera, Firefox etc. wird es korrekt angezeigt.
Hier das Script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Menü</title>
<style type="text/css">
body {
font: normal 12px sans-serif;
color: black; background-color: #808080;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: left;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0em; padding: 0;
}
* html ul#Navigation li {
margin-bottom: 0em;
}
*:first-child+html ul#Navigation li {
margin-bottom: 0em;
}
ul#Navigation li ul {
margin: 0; padding: 3px;
position: absolute;
top: 1.62em; left: 0em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul {
left: 0em;
lef\t: 0em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:white; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0em;
width: 140px;
}
ul#Navigation a, ul#Navigation span {
display: block;
padding: 0.2em 0em;
text-decoration: none; font-weight: bold;
border-left-color: white; border-top-color: white;
color: darkblue; background-color: #ffffff;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #5A77AD;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: white; background-color: #5A77AD;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: #5A77AD;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><a href="#"> Menüpunkt 1; | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
<li><a href="URL"> Link 5</a></li>
<li><a href="URL"> Link 6</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 2 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
<li><a href="URL"> Link 5</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 3 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 4 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 5 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 6 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 7 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 8 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
<li><a href="URL"> Link 5</a></li>
</ul>
</li>
</ul>
</body>
</html>
Ich hoffe ihr könnt mir weiter helfen denn den Fehler kann ich einfach nicht finden.