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