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

Beitrag lesen

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