nicht angemeldet
Hallo!
Ich habe folgende Navigationsleiste:
zur Navigationsleiste
Jetzt gestaltet sich das Navigieren von z.B. 1.Mannschaft zu 2.Mannschaft etwas schwierig!Ihr könnt es euch vielleicht einmal anschauen, dann wisst ihr, was ich meine!
Hier der Quelltext:
HTML:
<ul id="Navigation">
<img src="Bilder/Logos/VfLNiederwerrn.png" width="150" border="0" alt="">
<li><a href="index.php">Home</a></li>
<li><a href="Fussball">Fussball</a>
<ul class="zweiteebene">
<li><a href="index.php">1.Mannschaft</a>
<ul class="dritteebene">
<li><a href="erste-termine.php">Termine</a></li>
<li><a href="erste-team.php">Unser Team</a></li>
<li><a href="erste-spiel.php">Alles rund um's nächste Spiel</a></li>
</ul>
</li>
<li><a href="index.php">2.Mannschaft</a>
<ul class="dritteebene">
<li><a href="zweite-termine.php">Termine</a></li>
<li><a href="zweite-team.php">Unser Team</a></li>
<li><a href="zweite-spiel.php">Alles rund um's nächste Spiel</a></li>
</ul>
</li>
<li><a href="index.php">A-Jugend</a>
<ul class="dritteebene">
<li><a href="a-jugend-termine.php">Termine</a></li>
<li><a href="a-jugend-team.php">Unser Team</a></li>
<li><a href="a-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>
</ul>
</li>
<li><a href="index.php">B-Jugend</a>
<ul class="dritteebene">
<li><a href="b-jugend-termine.php">Termine</a></li>
<li><a href="b-jugend-team.php">Unser Team</a></li>
<li><a href="b-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>
</ul>
</li>
<li><a href="c-jugend.php">C-Jugend</a>
<ul class="dritteebene">
<li><a href="c-jugend-termine.php">Termine</a></li>
<li><a href="c-jugend-team.php">Unser Team</a></li>
<li><a href="c-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>
</ul>
</li>
<li><a href="d-jugend.php">D-Jugend</a>
<ul class="dritteebene">
<li><a href="d-jugend-termine.php">Termine</a></li>
<li><a href="d-jugend-team.php">Unser Team</a></li>
<li><a href="d-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>
</ul>
</li>
<li><a href="e-jugend">E-Jugend</a>
<ul class="dritteebene">
<li><a href="e-jugend-termine.php">Termine</a></li>
<li><a href="e-jugend-team.php">Unser Team</a></li>
<li><a href="e-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>
</ul>
</li>
<li><a href="f-jugend">F-Jugend</a>
<ul class="dritteebene">
<li><a href="f-jugend-termine.php">Termine</a></li>
<li><a href="f-jugend-team.php">Unser Team</a></li>
<li><a href="f-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>
</ul>
</li>
</ul>
<li><a href="volleyball.php">Volleyball</a></li>
<li><a href="index.php">Korbball</a>
<ul class="zweiteebene">
<li><a href="korbballu15.php">U15</a>
<ul class="dritteebene">
<li><a href="korbball-u15-termine.php">Termine</a></li>
<li><a href="korbball-u15-team.php">Unser Team</a></li>
</ul>
</li>
<li><a href="korbballu17.php">U17</a>
<ul class="dritteebene">
<li><a href="korbball-u17-termine.php">Termine</a></li>
<li><a href="korbball-u17-team.php">Unser Team</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="tischtennis.php">Tischtennis</a></li>
<li><a href="forum/index.php">Forum</a></li>
<li><a href="gaestebuch.php">Gästebuch</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="impressum">Impressum</a></li>
<li><a href="allgemeines.php">Allgemeine Informationen zu unserem Verein</a></li>
<li><a href="cms.php">Admin- und Trainerbereich</a></li>
</ul>
</div>
und der CSS-Code:
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: #00FF00;
}
* 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: #00BF00;
}
#Navigation ul li ul.dritteebene
{
visibility: hidden;
height: 0;
}
#Navigation ul.zweiteebene li:hover ul{
visibility: visible;
height: auto;
}
#Navigation ul.zweiteebene li:active ul{
visibility: visible;
height: auto;
}
#Navigation ul.zweiteebene li:focus ul{
visibility: visible;
height: auto;
}
Wäre echt sehr nett wenn sich einer die Mühe machen könnte und mir vielleicht einen Tipp geben könnte!
Danke im Voraus