Drop-Down per Hover funktioniert nicht im IE 6

Status
Nicht offen für weitere Antworten.

WIK-Lars

Erfahrenes Mitglied
Hallo Zusammen,

ich bin gerade - mit Hilfe einer Vorlage - dabei, ein Dropdown-Menü zu bauen. Der Dropdown erfolgt beim Überfahren mit der Maus.

Im Firefox 2.0 funktioniert die Geschichte. Im IE 6 nicht.
HTML:
<!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:50px 0 100px 15px; padding:0;} 
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;} 
#menu li dl {position:absolute; top:0; left:0;} 
#menu li a, #menu li a:visited {text-decoration:none;} 
#menu li dd {display:none;} 
#menu li:hover, #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 {padding-bottom:20px;} 
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} 
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65 url(bottom.gif) no-repeat bottom left; text-align:center; cursor:pointer;} 
#menu dt {margin:0; padding: 5px; font-size: 1.1em; color: #fff; border-bottom:1px solid #444;} 
#menu .one {background: #b2ab9b url(top.gif) no-repeat top left;} 
#menu .two {background: #949e7c url(top.gif) no-repeat top left;} 
#menu .three {background: #d4d8bd url(top.gif) no-repeat top left;} 
#menu .four {background: #e2dfa8 url(top.gif) no-repeat top left;} 
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; background: #47a; text-align:left;} 
#menu dd.last {border-bottom:1px solid #444;} 
.gallery dt a, .gallery dt a:visited {display:block; color:#444;} 
.gallery dd a, .gallery dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; 
background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px; 
} 
.gallery dd a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;} 
</style> 
</head> 

<body> 

<ul id="menu"> 
<li> 
<dl class="gallery"> 
<dt class="one"><a href="Aktuell/index.html">Aktuell</a></dt> 
<dd><a href="Aktuell/nachrichten.html">Nachrichten</a></dd> 
<dd><a href="Aktuell/newsletter.html">Newsletter</a></dd> 
<dd><a href="Aktuell/stellenangebote.html">Stellenangebote</a></dd> 
<dd class="last"><a href="Aktuell/ausblicke.html">Ausblicke</a></dd> 
</dl> 
</li> 


<li><a href="Unternehmen/index.html">Unternehmen</a></li> 
<li><a href="Loesungen/index.html">L&ouml;sungen</a></li> 
<li><a href="Spezialthemen/index.html">Spezialthemen</a></li> 
<li><a href="Partner/index.html">Partner</a></li> 
</ul> 

</body> 
</html>

Was braucht der IE 6, damit es funktioniert?

DANKE für Eure Antworten!
 
Hi,

vergleiche bitte einfach den HTML-Quellcode der Vorlage mit deinem Markup:

http://www.cssplay.co.uk/menus/drop_definition.html hat gesagt.:
Code:
<ul id="menu">

<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt class="one"><a href="../menu/index.html">DEMOS</a></dt>
	<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
	<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
	<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
	<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>

	<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
	<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
	<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
	<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
	<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</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="gallery">
	<dt class="two"><a href="index.html">MENUS</a></dt>
	<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
	<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
	<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
	<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>

	<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
	<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
	<dd class="last"><a href="circles.html" title="circular links">circular links</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="gallery">
	<dt class="three"><a href="../layouts/index.html">LAYOUTS</a></dt>

	<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
	<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
	<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
	<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
	<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</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="gallery">
	<dt class="four"><a href="../mozilla/index.html">MOZILLA</a></dt>
	<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
	<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
	<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
	<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>

	<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
	<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
	<dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
Und gewöhne dir bitte an, die Chatsprache "f-u-n-z-t" für "funktionieren" bei uns im Forum zu vermeiden, da sie vom System herausgefiltert wird, und in deinem Topic nur noch das verstümmelte "t" übrig geblieben ist, was ich nachträglich editiert habe. Vielen Dank.
 
Was braucht der IE 6, damit es funktioniert?

>> ne Deinstallation :offtopic::offtopic:


ne, aber mir das so umzuformatieren, das ich das ordentlich lesen kann, is mir zu stressig, hast du nen link wo ich mal testen kann ?
du koenntest dir derweil mal angucken welche der CSS gesteuerten effekte com ie nicht supportet werden, am besten mit hilfe von http://www.css4you.de/, da hast du immer ne schöne tabelle, was unterstuetzt wird und von wem

Information
Ok.. if you have Mozilla, Firefox, or Opera just hover your mouse over the menu to get a drop down list.

Unfortunately IE does not recognise :hover on anything other than links so fails miserably with this one.

5th September 2006

Works in Internet Explorer 7.

Note that this method has advanced greatly over the last couple of years. Check the 'Menus' section for the latest examples of drop down menus.

....was sagt dir das
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.
Zurück