Navi mit CSS und Drop Down Box geht nicht richtig

[BlackHawk1983]

Guten Tag an alle,

ich habe letztens die Frage gestellt warum mein layout sich zerschiesst wenn ich mit <ul><li> listen die Navigation mit untermenüs ausstatte. Mir hat man dazu geraten ich soll die Seite neu machen und mit DIV arbeiten statt mit Tabellen. Diesen Rat habe ich befolgt. Jetzt habe ich aber fast das gleiche Problem und brauche Hilfe .

Mein Quellcode mit der Liste sieht folgendermaßen aus:

<div id="navi" list-style-type:none;>
     
 <ul>
  <li><img src="bilder/navi.png" />

    <ul>
      <li><a href="#">VW Service & Zubehör</a></li>
      <li><a href="#">Audi Service & Zubehör</a></li>
      <li><a href="#">ADAC</a></li>
      <li><a href="#">Total Tankstelle</a></li>
      
  
    </ul>

  </li>

        </ul></div>

und mein CSS Code

body { behavior:url("csshover.htc"); }

#navi ul {
    list-style-type:none;
    list-style-position:outside
}

#navi li {
    list-style-type:none;
}

#navi ul li{    
    text-indent:0em
    display:inline; 
    float:left; 
    list-style:none;
    position:relative;
    list-style-type:none;
    list-style-position:outside
}

#navi li a{    
    
    text-decoration:none;
    font-family:calibri, Arial, Helvetica, sans-serif;
    font-size:14px;
    padding:0px;
}


#navi li ul{
    list-style-type:none;    
    text-indent:0em
    margin:0px;
    padding:0px;
    display: block;  
    height: 0; 
    width:200px;
    overflow: hidden;
    opacity: 0;
    position:absolute;
    -webkit-transition: all 0.5s ease-in; 
    -moz-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in;
}

#navi li:hover ul
{    height:auto;
    opacity:1;
    margin:0px 0;
    display:block;
    width:200px;
}

#navi li li
{
    padding:0px 0;
    list-style:none;
    display:list-item;
    margin:0px;
    float:none;
}

#navi li li a{
    margin:0px;
}

.clear{
    margin:0px;
    float:0px;
    clear:both;
}


.cc-menü {
    
    text-align: left;
    overflow: auto;
    position: absolute;
    z-index: auto;
}

folgender Fehler passiert. Die Navi rutscht weg nach rechts und bleibt nicht im Wrapper hängen.

Vielen Dank für eure Unterstützung

Mit freundlichen Grüßen

BlackHawk

 

[cebito]

AW: Navi mit CSS und Drop Down Box geht nicht richtig

Validiere bitte erstmal deine CSS-Dateien, da sind einige Fehler drin, die du zuerst beheben solltest! Die Fehlerkonsole im Firefox kann dir dabei helfen, sonst gib deine URL einfach mal hier http://jigsaw.w3.org/css-validator/ ein.