Frage stellen
seit kurzer Zeit experimentiere ich mit CSS herum. Nun habe ich eine Navigationsleiste mit einem Drop-Down Menu erstellt.
Bei Firefox sieht das ganze auch ganz ok aus, nur der IE 7 macht mal wieder Probleme:
1) Die beiden Dropdown-Menupunkte (Seite3a, Seite3b) sind nach rechts unter den nächsten Menupunkt (Seite 4) verschoben und werden nicht wie im FF unter "Seite 3" angezeigt.
2) Bei den beiden Dropdown-Menupunkte (Seite3a, Seite3b) steht in der Ansicht beim IE 7 ein Listenpunkt vor dem Namen (Seite3a bzw. Seite3b), die im FF nicht angezeigt werden.
3) Die beiden Dropdown-Menupunkte haben leider nicht die gleiche Breite in der IE 7 - Ansicht.
Hier der Code:
- Code: Alles auswählen
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Drop-Down Menu</title>
<style type="text/css">
ul#menu{
margin:2px;
padding-left:0px;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
font-size:17px;
font-weight:inherit;
background:transparent url(images/OFF.gif) repeat-x top left;
font-family:Candara;
border-bottom:2px solid #999999;
border-top:1px solid #cccccc;
}
ul#menu li{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a{
display:block;
float:left;
color:#900;
text-decoration:none;
font-weight:bold;
padding:10px 12px 0 12px;
height:24px;
background:transparent url(images/DIVIDER.gif) no-repeat top right;
}
ul#menu li a:hover{
background:transparent url(images/HOVER.gif) no-repeat top right;
}
ul#menu li ul {
display:none;
position:absolute;
float:none;
top:34px;
padding:0;
margin:0;
}
ul#menu li:hover ul {
display:block;
height:auto;
}
ul#menu li ul li{
float:none;
display:block;
font-size:17px;
font-weight:inherit;
background:transparent url(images/OFF.gif) repeat-x top left;
font-family:Candara;
border-bottom:2px solid #999999;
border-top:1px solid #cccccc;
}
ul#menu li ul li a{
float:none;
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="index.html" title="">Start</a></li>
<li><a href="#" title="">Seite1</a></li>
<li><a href="#" title="">Seite2</a></li>
<li><a href="#" title="">Seite3</a>
<ul>
<li> <a href="#" title="">Seite3a</a> </li>
<li> <a href="#" title="">Seite3b</a> </li>
</ul>
</li>
<li><a href="#" title="">Seite4</a></li>
<li><a href="#" title="">Seite5</a></li>
<li><a href="#" title="">Seite6</a></li>
</ul>
</body>
</html>
Ich hoffe, Ihr könnt mir hier etwas weiterhelfen. Ich wäre Euch sehr dankbar
Liebe Grüße
Stacy