DropDown Menü in CSS (drei Ebenen)

[linux87]

Hallo,

ich habe eine CSS-Navigation, die soweit auch in Ordnung ist - bis auf folgendes:

Wenn ich über den Navigationspunkt N1 mit der Maus fahre, öffnet sich das Seitenmenü N2, wenn ich nun über N2 drüberfahre, erscheint N3 und gleichzeitig auch N4, obwohl ich noch gar nicht mit der Maus über N3 gefahren bin.
Ich hoffe, ihr wisst, was ich meine.

Hier einmal eine Skizze:

Ich nehme stark an, dass es ein Fehler im Stylesheet liegt (ul, li...)

Hier ist der CSS-Ausschnitt:

#menu {width: 100%; background: #eee;} 

    #menu ul {list-style: none; margin: 0; padding: 0;} 

    #menu a {
      font: 13px/16px tahoma, arial, helvetica, sans-serif;
      display: block;
      border-width: 0px; border-style: solid; border-color: #f3c4ef;
      margin: 0; padding: 4px 3px;}

    #menu a {color: #000; background: url(images/hintergrund_gelb2.png); text-decoration: none;} 

    #menu a:hover {color: #A853A1;}




#menu li {position: relative;}

    #menu ul ul ul {position: absolute; top: 0; left: 100%; width: 110%;   border: 1px solid #f3c4ef;}

    div#menu ul ul ul, 
    div#menu ul ul li:hover ul ul {display: none;} 

    div#menu ul ul li:hover ul, 
    div#menu ul ul ul li:hover ul {display: block;}

    #menu ul li ul li a {background:#fff;}

und hier der dazu gehörige HTML-Part:

<div id="menu">
    <ul>
      <ul>
      <li><a href="#">N1</a>
        <ul>
        <li><a href="#">N2</a>
                <ul>
                <li><a href="#">N3</a>
                       <ul>
                        <li><a href="#">N4</a>
                        </ul>
                </ul>
        </ul>
      </li>
    </div>

 

[prm]

Überprüfe zunächst nochmal deinen HTML-Aufbau (validieren):
ul darf nur li enthalten.
Der zweite geöffnete ul darf an dieser Stelle nicht stehen.
Nach dem letzten schließenden li muss zumindest noch ein schließendes ul kommen.

 

[linux87]

Hallo prm,

ich habe im HTML-Code jegliche li-ul-Varianten probiert, aber es klappt leider nicht. Es muss wohl am CSS Code liegen.

Weißt du Näheres?

Liebe Grüße und vielen Dank.

 

[prm]

Siehe nochmal mein bisheriger Beitrag.

Du hast fünf mal ul geöffnet aber nur drei mal geschlossen. Entweder sind zwei geöffnete ul zu viel oder zwei geschlossene zu wenig.

li wird vier mal geöffnet, aber nur einmal geschlossen.

Beides ist damit nicht valide.
Je nach HTML ergeben sich dann auch Konsequenzen für CSS.

 

[linux87]

Hallo prm,

ich weiß, dass ich im obigen Beispiel (N1, N2...) mehrere Ul's und li's nicht geschlossen habe, aber auch wenn alle geschlossen sind, tritt der Fehler auf.

 

[_Thor_]

Weil die Verschachtelung falsch ist.

<ul>
  <ul>

ist nicht erlaubt.

Listenelemente <li> müssen immer in einer <ul>, <ol> stehen, verschachtelte Listen müssen immer in einem Listenelement stehen.

<ul>
  <li>
    <ul>
      <li>
        <ul>
         <li></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Sauberes Arbeiten und schließen der Tags hilft dir dabei, solche Fehler zu vermeiden.