DropDown Menü

[mira666]

Hallo Zusammen,

ich habe da ein paar kleine Problemchen mit meinem DropDown Menü. Im IE sieht es soweit ganz gut aus, bis auf einen Menüpunkt. Hier sind alle Untermenüpunkte farbig hinterlegt. Die Hinterlegung soll aber nur bei Hover aktiv werden. Hierzu ein screenshot - "screenshot_ie_fehler"

Im Firefox ist die Darstellung leider total daneben, weiß aber nicht wieso. Hierzu auch ein screenshot - "screenshot_firefox"

Auf folgendem screenshot seht ihr wie ich es haben möchte. "screen_ie"

Hier ein Auschnitt des HTML-Codes der fehlerhaften Seite:

<div id="navi">
  <ul id="ebene1">
  	<li id="navi01"><a href="index.html">Home</a></li>
    <li id="navi02"><a href="training.html">Training</a></li>
 	 	<ul class="ebene2">
  	<li id="pro"><a href="projekt.html">Projektmanagement</a></li>
    <li id="per"><a href="personal.html">Personalentwicklung</a></li>
    <li id="tea"><a href="team.html">Teamentwicklung</a></li>
 	 </ul> 
    <li id="navi0201"><a href="consulting.html">Consulting</a></li>
    	
  	<li id="navi0301"><a href="coaching.html">Coaching</a></li>
    	<ul class="ebene2">
  	<li id="busi"><a href="business.html">Business Coaching</a></li>
    <li id="pers"><a href="personalcoa.html">Personal Coaching</a></li>
    <li id="teac"><a href="teamcoa.html">Team Coaching</a></li>
 	 </ul>
  	<li id="navi0401"><a href="therapie.html">Therapie</a></li>
  	<li id="navi0501"><a href="profil.html">Profil</a></li>
    <li id="navi0601"><a href="preise.html">Preise</a></li>
    <li id="navi0701"><a href="referenzen.html">Referenzen</a></li>
    	<ul class="ebene2">
    <li id="kunden"><a href="kunden.html">Kunden</a></li>
  	<li id="teil"><a href="teiln.html">Teilnehmerstimmen</a></li>
     </ul>
    <li id="navi0801"><a href="kontakt.html">Kontakt</a></li>
    <li id="navi0901"><a href="impressum.html">Impressum</a></li>
 </ul>
  
  </div>

Und hier das CSS dazu:

#navi {
	position:absolute;
	left:0px;
	top:41px;
	width:643px;
	height:181px;
	z-index:1;
	overflow:hidden;
	color:#0000CC;
	padding:0px;
	margin:0px;
	font-size:smaller;
}
* html #navi { height: 1%; }

#navi ul {margin:0;}
#navi li {
	float: left;
	width:auto;
	list-style: none;
	margin: 0;}
	
/* Liste in Ebene 2 clearen */
#navi li li {clear:both;}
/* Ende  */

/* Hyperlinks Ebene 1*/
#navi a {
	display:block;
	color:#0000CC;
	padding:0.4em 1em; }
	
#navi a:hover,
#navi a:focus,
#index #navi01 a,
#training #navi02 a,
#projekt #pro a,
#personal #per a,
#team #tea a,
#consulting #navi0201 a,
#coaching #navi0301 a,
#business #busi a,
#personalcoa #pers a,
#teamcoa #teac a,
#therapie #navi0401 a,
##profil #navi0501 a,
#preise #navi0601 a,
#referenzen #navi0701 a,
#kunden #kunden a
#teiln #teil a,
#kontakt #navi0801 a,
#impressum #navi0901 a {
	color:#0000CC;
	background-color:#CCCCCC;
	border-bottom:none;}
	
#navi a:active {
	color:#000033;
	background-color:#CCCCCC;}
	
/* Ende  */
/* Ebene 2 verstecken    */
#navi li ul {
	position:absolute;
	left: -9999px;
	top: -9999px;
	display:inline;
	width: 0;
	height: 0;
	background-color: transparent;	}
	
	
/* Ebene 2 sichtbar!   */
#navi li:hover ul {
	left:auto;
	top:auto;
	display:block;
	width:auto;
	height:auto;
	background-color:#FFFFFF;  }

Wäre ganz lieb, wenn Ihr mir helfen könntet.
Danke
Miriam

[theo]

hi miriam,

leider habe ich keine zeit, mich durch deinen code zu wuehlen. aber vielleicht hilft dir ja dieser tip hier weiter.