Problem Darstellung im IE

maka · 22. Dez. 2007

Hey Leute habe ein Aufklappmenü mit CSS erstellt, unter firefox läuft dieses super und macht auch keine probleme aber unter IE wird nur das oberste Menü angetan, es tut sich beim Mouseover gar nichts.
Hier das Script:

PHP:

<html>
<head><style type="text/css">

#menu {list-style-type:none; margin:40px 0 200px 15px; padding:0;}

#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:1px; z-index:100;}
#menu li a, #menu li a:visited {text-decoration:none;}

#menu dl {
	position:absolute;
	top:-5px;
	left:1px;
	width: 150px;
	margin: 0;
	padding: 0;
	background: transparent url(transparency.gif);
}
#menu dt {background: #FFFF00; margin:0;font-size: 1.1em; border-bottom:1px solid #000000; width:150px; float:left;}
#menu dd {display:none; background: transparent; border-bottom:1px solid #000000; clear:left; margin:0; padding:0; color: #FFFF99; font-size: 1em; text-align:left;}

#menu dt a, #menu dt a:visited {display:block; color: #000000; padding: 5px 5px 5px 20px; width:125px;}
#menu dd a, #menu dd a:visited {background: #FFFF66; color:#000000; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:276px;}

#menu li a:hover {border:0;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:301px; border-bottom:15px solid #FFFFFF;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {background: #000000; color: #FFFF00;}
</style>
</head>
<body>
<ul id="menu">
<li>
<dl class="one">
	<dt><a href="">Aktuelles</a></dt>
	<dd><a href="" title="Aktuelles">Aktuelles</a></dd>
	<dd><a href="" title="Ergebnisse">Ergebnisse</a></dd>
</dl>
</li>
<li>
<dl class="two">
	<dt><a href="">Bereich</a></dt>
	<dd><a href="" title="1. Herren">1. Herren</a></dd>
	<dd><a href="" title="2. Herren">2. Herren</a></dd>
	<dd><a href="" title="3. Herren">3. Herren</a></dd>
	<dd><a href="" title="4. Herren">4. Herren</a></dd>
	<dd><a href="" title="1. Schüler">1. Schüler</a></dd>
	<dd><a href="" title="2. Schüler">2. Schüler</a></dd>
</dl>
</li>
<li>
<dl class="three">
	<dt><a href="">Interaktiv</a></dt>
	<dd><a href="" title="Gästebuch">Gästebuch</a></dd>
	<dd><a href="" title="Fotos">Fotos</a></dd>
</dl>
</li>
<li>
<dl class="four">
	<dt><a href="">Der Verein</a></dt>
	<dd><a href="" title="Vorstand">Vorstand</a></dd>
	<dd><a href="" title="Trainingszeiten">Trainingszeiten</a></dd>
	<dd><a href="" title="Anfahrt">Anfahrt</a></dd>
	<dd><a href="" title="Kontakt">Kontakt</a></dd>
	<dd><a href="" title="Links">Links</a></dd>
	<dd><a href="" title="Impressum">Impressum</a></dd>
</dl>
</li>
</ul>
</body>
</html>

Vllt hat ja einer von Euch eine Idee.
Danke

anna55 · 23. Dez. 2007

Mal auf die Schnelle: Im IE7 werden die Unterpunkte angezeigt, wenn Du nen Doctype hinzunimmst. IE6 macht da aber noch nicht mit.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

anna55 · 23. Dez. 2007

So macht auch der IE6 mit:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><style type="text/css">

#menu {list-style-type:none; margin:40px 0 200px 15px; 

padding:0;}

#menu li {float:left; padding:0; margin:0 1px 0 0; 

position:relative; width:150px; height:1px; z-index:100;}
#menu li a, #menu li a:visited {text-decoration:none;}

#menu dl {
position:absolute;
top:-5px;
left:1px;
width: 150px;
margin: 0;
padding: 0;
background: transparent url(transparency.gif);
}
#menu dt {background: #FFFF00; margin:0;font-size: 1.1em; 

border-bottom:1px solid #000000; width:150px; float:left;}
#menu dd {display:none; background: transparent; 

border-bottom:1px solid #000000; clear:left; margin:0; 

padding:0; color: #FFFF99; font-size: 1em; text-align:left;}

#menu dt a, #menu dt a:visited {display:block; color: #000000; 

padding: 5px 5px 5px 20px; width:125px;}
#menu dd a, #menu dd a:visited {background: #FFFF66; 

color:#000000; text-decoration:none; display:block; padding:4px 

5px 4px 20px; width:276px;}

#menu li a:hover {border:0;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:301px; 

border-bottom:15px solid #FFFFFF;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover 

{background: #000000; color: #FFFF00;}
</style>
</head>
<body>
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="one">
<dt><a href="">Aktuelles</a></dt>
<dd><a href="" title="Aktuelles">Aktuelles</a></dd>
<dd><a href="" title="Ergebnisse">Ergebnisse</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="two">
<dt><a href="">Bereich</a></dt>
<dd><a href="" title="1. Herren">1. Herren</a></dd>
<dd><a href="" title="2. Herren">2. Herren</a></dd>
<dd><a href="" title="3. Herren">3. Herren</a></dd>
<dd><a href="" title="4. Herren">4. Herren</a></dd>
<dd><a href="" title="1. Schüler">1. Schüler</a></dd>
<dd><a href="" title="2. Schüler">2. Schüler</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="three">
<dt><a href="">Interaktiv</a></dt>
<dd><a href="" title="Gästebuch">Gästebuch</a></dd>
<dd><a href="" title="Fotos">Fotos</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="four">
<dt><a href="">Der Verein</a></dt>
<dd><a href="" title="Vorstand">Vorstand</a></dd>
<dd><a href="" title="Trainingszeiten">Trainingszeiten</a></dd>
<dd><a href="" title="Anfahrt">Anfahrt</a></dd>
<dd><a href="" title="Kontakt">Kontakt</a></dd>
<dd><a href="" title="Links">Links</a></dd>
<dd><a href="" title="Impressum">Impressum</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>

Problem Darstellung im IE

maka

New member

anna55

Moderator

anna55

Moderator