Guten Abend,
ich habe ein Problem mit meinem Drop-Down-Menü. Im Firefox funktioniert es perfekt, nur im Internet Explorer will es nicht aufklappen. Ich habe keine Ahnung was ich falsch gemacht habe
Hier erstmal mein Code:
[HTML]
Lichtechnikbody {
text-align:center;
background:#171717;
}
- {
margin: 0;
padding: 0;
}
#menu {
background:#D0D0D0;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
text-align:center;
}
#menu ul {
float: left;
width: 150px;
list-style-type: none;
}
/–definiert die Blocküberschriften–/
#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}
/–definiert die „Drop-Down-Links“ im Normalzustand–/
#menu a {
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #ff9224;
color: #003366;
}
/–definiert die „Drop-Down-Links“ im Hoverzustand–/
#menu a:hover {
color: #ff9224;
background: #003366;
}
/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern–
*/
#menu li {
position: relative;
}
/–versteckt die „Drop-Down-Links“, solange nicht gehovert wird–/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/–lässt die Dropdown-Links beim Hovern erscheinen–/
#menu ul li:hover ul {
display: block;
}
/–nur für IE-Versionen <=6 erkennbar–/
- html #menu ul li {
float: left;
width: 100%;
}
/–nur für IE 7 erkennbar–/
*+ html #menu ul li {
float: left;
width: 100%;
}
*html #menu ul li a {
height: 1%;
}
/– lässt die dritte Ebene verschwinden–/
#menu ul li:hover ul ul {display: none;}
/– lässt die dritte Ebene beim Hovern über die zweite in Erscheinung treten–/
div#menu ul ul li:hover ul {display: block; position: absolute; top: 0; left: 100%;}
#block {
background:#D1D1D1;
margin-top:3%;
margin-bottom:5%;
width:905px;
border: 2px solid black;
text-align:center;
}
</head>
<ul>
<li>
<h3>Home</h3>
</li>
</ul>
<ul>
<li>
<h3>Profil</h3>
<ul>
<li><a href="#">Geschichte</a></li>
<li><a href="#">Mitarbeiter</a></li>
<li><a href="#">Vorstand</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h3>Angebot</h3>
<ul>
<li><a href="#">Glühbirnen</a></li>
<li><a href="#">Laser</a></li>
<li><a href="#">Taschenlampen</a></li>
<li><a href="#">Einbau</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h3>Referenzen</h3>
<ul>
<li><a href="#">Diskotheken</a></li>
<li><a href="#">Bars</a></li>
<li><a href="#">Restaurants</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Museen</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h3>Support</h3>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Anrufen</a></li>
<li><a href="#">E-Mail</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h3>Partner</h3>
<ul>
<li><a href="#">Die Krosse Krabbe</a></li>
<li><a href="#">Kunstgallerie</a></li>
<li><a href="#">Partykeller</a></li>
</ul>
</li>
</ul>
</div>
</center>
<div style="clear: both;">
</div>
<img src="Bilder/girlande.gif" alt="" border="0" width="" height="">
</br>
<div id="inhalt">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<hr id="schlussstrich">
<p id="fussleiste"><a href="">Impressum</a> | <a href="">AGB</a> | <a href="">Kontakt</a></p>
</div>
</center>
[/HTML]Ich hoffe, ihr könnt mir weiter helfen :)
Alles Liebe,
Slayour.
EDIT:
hat sich geklärt. für alle mit dem selben problem, denkt dran, im internet-explorer braucht ihr, wenn ihr :hover auf andere elemente außer a verwendet, eine richtige doctype, nicht so fehlerhaft wie meine… ich hab die genommen und damit geht es: