Ungeordnete Liste für Navigation(Klappmenü) soll verschwinden!

[chill]

Hallo!
Ich habe eine Navigation(Klappmenü)!!Sie hat auch super funktioniert, nur wollte ich heute ein drittes Untermenü(also eine dritte ungeordnete Liste) einfügen, hab auch die CSS-Datei angepasst, jedoch klappt das mit dem Aufklappen nicht richtig, d.h.erst wenn man mit der Maus auf B-Jugend geht, sollen dann die weiteren Unterpunkte Termine und Unser Team angezeigt werden, jedoch werden diese schon vorher angezeigt!

Zum besseren Verständnis hier mal der Code:

<ul id="Navigation">  
    <img src="..." width="150"  border="0" alt="">  
    <li><a href="index.php">Home</a></li>  
    <li><a href="Fussball">Fussball</a>  
      <ul>  
        <li><a href="F-Jugend">F-Jugend</a></li>  
        <li><a href="E-Jugend">E-Jugend</a></li>  
        <li><a href="D-Jugend">D-Jugend</a></li>  
        <li><a href="C-Jugend">C-Jugend</a></li>  
        <li><a href="index.php">B-Jugend</a>  
           <ul>  
           <li><a href="termine.php">Termine</a></li>  
           <li><a href="team.php">Unser Team</a></li>  
           </ul>  
        </li>  
        <li><a href="A-Jugend">A-Jugend</a></li>  
        <li><a href="zweitemannschaft">2.Mannschaft</a></li>  
        <li><a href="erstemannschaft">1.Mannschaft</a></li>  
      </ul><li><a href="Volleyball">Volleyball</a></li>  
      <li><a href="Korbball">Korbball</a>  
      <ul>  
        <li><a href="u15">u15</a></li>  
        <li><a href="u17">u17</a></li>  
      </ul>  
    </li>  
    <li><a href="Tischtennis">Tischtennis</a></li>  
    <li><a href="forum.php">Forum</a></li>  
    <li><a href="gaestebuch.php">Gästebuch</a></li>  
    <li><a href="kontakt.php">Kontakt</a></li>  
      </ul>  
</div>

und hier das zugehörige Stylesheet:

ul#Navigation li {  
 padding-top: 2pt;  
 padding-bottom: 2pt;  
}  
#Navigation li ul {  
 visibility: hidden;  
 height: 0;  
}  
  
#Navigation li:hover ul {  
 visibility: visible;  
 height: auto;  
  
}  
  
#Navigation li:active ul {  
 visibility: visible;  
 height: auto;  
}  
  
#Navigation li:focus ul {  
 visibility: visible;  
 height: auto;  
}  
  
* html ul#link li ul {  
 visibility: visible;  
 height: auto;  
}  
  
  
  
  ul#Navigation {  
    width: 10em;  
    margin: 0; padding: 0.8em;  
    border: 1px solid black;  
    background-color: #FFFFFF;  
    float:left;  
  }  
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */  
    width: 11.6em;  
    w\idth: 10em;  
    padding-left: 0;  
    padd\ing-left: 0.8em;  
  }  
  ul#Navigation li {  
    list-style: none;  
    margin: 0.4em; padding: 0;  
  }  
  
  ul#Navigation li ul {  
    margin: 0 0 0 1em; padding: 0;  
  }  
  ul#Navigation li ul li {  
    margin: 0.1em 0;  
  }  
  * html ul#Navigation li ul li {  /* Korrektur fuer IE 5.x */  
    margin-left: 1em;  
    ma\rgin-left: 0;  
  }  
  
  ul#Navigation a {  
    display:block;  
    padding: 0.2em;  
    text-decoration: none; font-weight: bold;  
    border: 1px solid black;  
    border-left-color: white; border-top-color: white;  
    color: black; background-color: #EEF3F2;  
  }  
  * html ul#Navigation a {  
    width: 100%;    /* Breitenangabe fuer IE 5.x */  
    w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */  
  }  
  * html ul#Navigation li ul li a {  
    width: 100%;    /* Breitenangabe fuer IE 5.x */  
    w\idth: 7.8em;  /* Breitenangabe fuer IE 6 */  
  }  
  ul#Navigation a:hover {  
    border-color: white;  
    border-left-color: black; border-top-color: black;  
    color: white; background-color: gray;  
  }  
#Navigation li ul li ul  
{  
 visibility: hidden;  
 height: 0;  
}  
#Navigation li ul li:hover ul {  
 visibility: visible;  
 height: auto;  
}  
  
#Navigation li ul li:active ul {  
 visibility: visible;  
 height: auto;  
}  
  
#Navigation li ul li:focus ul {  
 visibility: visible;  
 height: auto;  
}

Ich verzweifle noch!!;)
Hoffe ihr könnt mir helfen!!
Danke schon im Voraus

[Beat]

Hallo

Bevor du dir eine Lösung erhackst, solltest du dir Gedanken machen, wie sinnvoll dermassen verschachtelte Menus sind.
Persönlich finde ich bereits den zweitel Level von Dropdown-Menus an der Grenze der Usability.

mfg Beat

[chill]

Hallo

Bevor du dir eine Lösung erhackst, solltest du dir Gedanken machen, wie sinnvoll dermassen verschachtelte Menus sind.
Persönlich finde ich bereits den zweitel Level von Dropdown-Menus an der Grenze der Usability.

mfg Beat

Ja, du hast recht, aber ich hab auch schon darüber nachgedacht und bei dieser Navigation ist es (unserer Meinung nach) schon wichtig!
Wäre echt nett wenn mir jemand helfen könnte!
Unser Team verzweifelt noch ;)

[chill]

achja der teil vom Css, der nicht funktioniert ist folgender:

#Navigation li ul li ul  
{  
 visibility: hidden;  
 height: 0;  
}  
#Navigation li ul li:hover ul {  
 visibility: visible;  
 height: auto;  
}  
  
#Navigation li ul li:active ul {  
 visibility: visible;  
 height: auto;  
}  
  
#Navigation li ul li:focus ul {  
 visibility: visible;  
 height: auto;  
}

[Auge]

Hallo

achja der teil vom Css, der nicht funktioniert ist folgender:

Nö, der funktioniert tadellos, kannst du mir glauben.

#Navigation li ul li ul

{
visibility: hidden;
height: 0;
}
#Navigation li ul li:hover ul {
visibility: visible;
height: auto;
}

#Navigation li ul li:active ul {
visibility: visible;
height: auto;
}

#Navigation li ul li:focus ul {
visibility: visible;
height: auto;
}

  
Dein Problem ist, dass folgender Code auch funktioniert:  
  
~~~css
#Navigation li ul {  
 visibility: hidden;  
 height: 0;  
}  
  
#Navigation li:hover ul {  
 visibility: visible;  
 height: auto;  
  
}  
  
#Navigation li:active ul {  
 visibility: visible;  
 height: auto;  
}  
  
#Navigation li:focus ul {  
 visibility: visible;  
 height: auto;  
}

Der gilt nämlich nicht nur für die _direkt_ in einem Listenpunkt der Liste mit der ID "Navigation" notierten Listen, sondern für _alle_ Listen, welcher Verschachtelungstiefe auch immer, die innerhalb eines Listenpunktes der Liste mit der ID "Navigation" notiert sind. Also auch für deine dritte Navigationsebene.

Du kannst versuchen, mit der <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität der Selektoren> zu experimentieren, um die von mir zitierten Regeln durch die oben von dir in's Posting eingefügten zu überschreiben.

Tschö, Auge

[Auge]

Hallo

Du kannst versuchen, mit der <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität der Selektoren> zu experimentieren, um die von mir zitierten Regeln durch die oben von dir in's Posting eingefügten zu überschreiben.

... oder du arbeitest mit Klassen (z.B. .zweite-navigationsebene und .dritte-navigationsebene) in den Listen der Untermenüs, um in der CSS-Datei die jeweils gewünschte Liste ansprechen zu können (#navigation li ul.zweite-navigationsebene bzw. #navigation li ul.zweite-navigationsebene li:hover ul.dritte-navigationsebene).

Tschö, Auge

[chill]

Hallo

Du kannst versuchen, mit der <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität der Selektoren> zu experimentieren, um die von mir zitierten Regeln durch die oben von dir in's Posting eingefügten zu überschreiben.

... oder du arbeitest mit Klassen (z.B. .zweite-navigationsebene und .dritte-navigationsebene) in den Listen der Untermenüs, um in der CSS-Datei die jeweils gewünschte Liste ansprechen zu können (#navigation li ul.zweite-navigationsebene bzw. #navigation li ul.zweite-navigationsebene li:hover ul.dritte-navigationsebene).

Tschö, Auge

Hi!
Eratmal vielen vielen Dank!!Ich werds gleich mal mit Klassen probieren, hoffentlich klappts!!!

[at]

Hallo.

... oder du arbeitest mit Klassen

Oder mit dem Kind-Selektor.
MfG, at

[Auge]

Hallo

... oder du arbeitest mit Klassen

Oder mit dem Kind-Selektor.

Oder so, wobei zu beachten ist: "Beachten Sie: Der Internet Explorer 6.0 interpretiert die Selektoren > (Kind-Selektor) und + (Nachbar-Selektor) noch nicht." (ebenda). Da muss man halt wissen, ob man das für relevant erachtet. Ich würde dies, im Falle einer öffentlich zugänglichen Seite, derzeit noch tun.

Tschö, Auge

[at]

Hallo.

Oder so, wobei zu beachten ist: "Beachten Sie: Der Internet Explorer 6.0 interpretiert die Selektoren > (Kind-Selektor) und + (Nachbar-Selektor) noch nicht." (ebenda). Da muss man halt wissen, ob man das für relevant erachtet. Ich würde dies, im Falle einer öffentlich zugänglichen Seite, derzeit noch tun.

Der IE6 weiß ja auch nicht korrekt mit li:hover umzugehen, so dass man sich diese Frage entweder für die gesamte Konstruktion stellen sollte oder gar nicht. Der Verzicht auf den Kind-Selektor allein erzeugt also weniger eleganten Code Code und wirkt sich hier für den IE6 nicht positiv aus.
MfG, at

[Auge]

Hallo

Beachten Sie: Der Internet Explorer 6.0 interpretiert die Selektoren > (Kind-Selektor) ... nicht."

Der IE6 weiß ja auch nicht korrekt mit li:hover umzugehen, so dass man sich diese Frage entweder für die gesamte Konstruktion stellen sollte oder gar nicht.

Das ist ein Argument.

Der Verzicht auf den Kind-Selektor allein erzeugt also weniger eleganten Code Code und wirkt sich hier für den IE6 nicht positiv aus.

Das deine Lösung um einiges eleganter ist, als mein vorgeschlagenes Herumhantieren mit Klassen, ist unbestritten. :-)

Tschö, Auge