Hallo Leute,
ich habe eine Navigation (Code siehe unten) und möchte, dass die Unterpunkte nach unten aufgehen und nicht, so wie jetzt, nach oben. Was muss ich im Code ändern? Mir schwirrt schon der Kopf vom vielen googlen, aber ich kann keine wirkliche Antwort finden bzw. es anscheinend nicht richtig umsetzen ;(
HTML-Code:
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#">Physiotherapie</a>
<ul class="klein">
<li><a href="#">Unser Team </a></li>
<li><a href="#">Unsere Leistungen</a></li>
</ul>
</li>
<li><a href="#">Balance-Werkstatt</a>
<ul class="fly_02">
<li><a href="#"><span style="margin-left:20px; font-weight:bold;">Yogakurse</span></a>
<ul class="fly">
<li><a href="#"><span style="margin-left:25px;">Dienstag</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Mittwoch</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Donnerstag</span></a></li>
</ul>
</li>
</ul>
<li><a href="#">Rückenschule</a></li>
<li><a href="#">Reiki</a>
<ul class="fly">
<li><a href="#"><span style="margin-left:25px;">alle Reikitermine im Überblick</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki-I-Seminar</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki-II-Seminar</span></a></li>
<li><a href="#"><span style="margin-left:25px;">offene Reikitreffen</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki-Wochenende</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki für Tiere</span></a></li>
</ul>
</li>
<li><a href="#">Autogenes Training</a></li>
<li><a href="#">Kräuterseminar</a></li>
<li><a href="#">Bachblütenberatung</a></li>
<li><a href="#">Ausbildungen</a>
<ul class="klein_02">
<li><a href="#"><span style="margin-left:25px;">Yoga-Übungsleiter</span></a></li>
</ul></li>
<li><a href="#">Dozenten/Kursleiter</a></li>
<li><a href="#">Kursplan</a></li>
<li><a href="#">Kontakt/Impressum</a></li>
</ul>
</div>
</body>
CSS-Code:
#wrapper {position:absolute; height:500px; width:160px; margin:0; }
/* fuer Internet Explorer erzwingt einen refresh nach :active + ul */
#menu li a,
/* allgemeines Styling */
#menu, #menu ul {padding:0; margin:0; list-style:none; width:250px;}
#menu {padding:10px 0; background:white; border:5px solid brown; position:absolute; bottom:0; }
#menu li {display:inline;}
#menu li {*float:left;} /* entfernt im IE7 die horizontale Luecke zwischen den li */
#menu li a {display:block; width:200px; line-height:30px; background:white; color:black; text-decoration:none; font-family:arial, sans-serif; font-size:13px; text-align:left; font-weight:bold; outline:0; margin-left:10px;}
#menu li:hover > a {background:yellow;}
#menu ul {background:white; height:0; overflow:hidden;}
#menu ul li a {background:white; font-weight:normal; font-size:13px;}
#menu ul li a:hover {background
ink; }
#menu li a:active {background:white;}
#menu li a:active + ul {padding:0 0 0px 0;}
#menu li a:active + ul.fly {height:200px;}
#menu li a:focus {background:white; }
#menu li a:focus + ul {padding:0 0 10px 0;}
#menu li a:focus + ul.fly {height:200px;}
#menu li ul:hover {padding:0 0 10px 0;}
#menu li ul.fly:hover {height:200px;}
#menu li a:active + ul.klein {height:50px;}
#menu li a:focus + ul.klein {height:50px;}
#menu li ul.klein:hover {height:50px;}
#menu li a:active + ul.klein_02 {height:30px;}
#menu li a:focus + ul.klein_02 {height:30px;}
#menu li ul.klein_02:hover {height:30px;}
#menu li a:active + ul.fly_02 {height:50px;}
#menu li a:focus + ul.fly_02 {height:50px;}
#menu li ul.fly_02:hover {height:110px;}
Vielen vielen Dank :)
ich habe eine Navigation (Code siehe unten) und möchte, dass die Unterpunkte nach unten aufgehen und nicht, so wie jetzt, nach oben. Was muss ich im Code ändern? Mir schwirrt schon der Kopf vom vielen googlen, aber ich kann keine wirkliche Antwort finden bzw. es anscheinend nicht richtig umsetzen ;(
HTML-Code:
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#">Physiotherapie</a>
<ul class="klein">
<li><a href="#">Unser Team </a></li>
<li><a href="#">Unsere Leistungen</a></li>
</ul>
</li>
<li><a href="#">Balance-Werkstatt</a>
<ul class="fly_02">
<li><a href="#"><span style="margin-left:20px; font-weight:bold;">Yogakurse</span></a>
<ul class="fly">
<li><a href="#"><span style="margin-left:25px;">Dienstag</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Mittwoch</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Donnerstag</span></a></li>
</ul>
</li>
</ul>
<li><a href="#">Rückenschule</a></li>
<li><a href="#">Reiki</a>
<ul class="fly">
<li><a href="#"><span style="margin-left:25px;">alle Reikitermine im Überblick</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki-I-Seminar</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki-II-Seminar</span></a></li>
<li><a href="#"><span style="margin-left:25px;">offene Reikitreffen</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki-Wochenende</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki für Tiere</span></a></li>
</ul>
</li>
<li><a href="#">Autogenes Training</a></li>
<li><a href="#">Kräuterseminar</a></li>
<li><a href="#">Bachblütenberatung</a></li>
<li><a href="#">Ausbildungen</a>
<ul class="klein_02">
<li><a href="#"><span style="margin-left:25px;">Yoga-Übungsleiter</span></a></li>
</ul></li>
<li><a href="#">Dozenten/Kursleiter</a></li>
<li><a href="#">Kursplan</a></li>
<li><a href="#">Kontakt/Impressum</a></li>
</ul>
</div>
</body>
CSS-Code:
#wrapper {position:absolute; height:500px; width:160px; margin:0; }
/* fuer Internet Explorer erzwingt einen refresh nach :active + ul */
#menu li a,
/* allgemeines Styling */
#menu, #menu ul {padding:0; margin:0; list-style:none; width:250px;}
#menu {padding:10px 0; background:white; border:5px solid brown; position:absolute; bottom:0; }
#menu li {display:inline;}
#menu li {*float:left;} /* entfernt im IE7 die horizontale Luecke zwischen den li */
#menu li a {display:block; width:200px; line-height:30px; background:white; color:black; text-decoration:none; font-family:arial, sans-serif; font-size:13px; text-align:left; font-weight:bold; outline:0; margin-left:10px;}
#menu li:hover > a {background:yellow;}
#menu ul {background:white; height:0; overflow:hidden;}
#menu ul li a {background:white; font-weight:normal; font-size:13px;}
#menu ul li a:hover {background
ink; }#menu li a:active {background:white;}
#menu li a:active + ul {padding:0 0 0px 0;}
#menu li a:active + ul.fly {height:200px;}
#menu li a:focus {background:white; }
#menu li a:focus + ul {padding:0 0 10px 0;}
#menu li a:focus + ul.fly {height:200px;}
#menu li ul:hover {padding:0 0 10px 0;}
#menu li ul.fly:hover {height:200px;}
#menu li a:active + ul.klein {height:50px;}
#menu li a:focus + ul.klein {height:50px;}
#menu li ul.klein:hover {height:50px;}
#menu li a:active + ul.klein_02 {height:30px;}
#menu li a:focus + ul.klein_02 {height:30px;}
#menu li ul.klein_02:hover {height:30px;}
#menu li a:active + ul.fly_02 {height:50px;}
#menu li a:focus + ul.fly_02 {height:50px;}
#menu li ul.fly_02:hover {height:110px;}
Vielen vielen Dank :)
