nicht angemeldet
Hallo,
ich möchte in meine Menü-Navigation einen Punkt "aufklappbar" machen.
Dabei soll das ganze nur per CSS realisiert werden. Im Moment habe ich meine Navigation noch mit Klassen versehen. Ich weiß, dass es auch mit Listen (wahrscheinlich) besser ist. Dennoch möchte ich erstmal versuchen den jetzigen Quelltext zu verwenden sowie die entsprechende Formatierung mit CSS.
Bräuchte Eure Hilfe, da ich den Wald vor lauter Bäumen (Tuts, Tips, Tricks etc.) nicht mehr sehen:) Mein Problem sind die Angaben in der CSS-Datei. Eine Anregung von außen scheint da ratsam. Welche Ideen habt Ihr?
Zur Info: Der Punkt "Interessen" soll aufklappbar sein (Musik, Literatur z.B.). Im Quelltext sind die Unterpunkt schon mal drin, nicht im CSS!
Quelltext:
<div id="navigation">
<p class="navi-menu">MENÜ A</p>
<ul><li id="navi01"><a href="index.html">Startseite</a></li></ul>
<p class="navi-menu">MENÜ B</p>
<ul>
<li id="navi02"><a href="profil.html">Profil</a></li>
<li id="navi03"><a ref="qualifikationen.html">Qualifikationen</a></li>
<li id="navi04"><a href="kompetenzen.html">Fachkompetenzen</a></li>
<li id="navi05"><a ref="berufsfelder.html">Berufsfelder</a></li>
</ul>
<p class="navi-menu">MENÜ C</p>
<ul>
<li id="navi06"><a href="interessen.html">Interessen</a></li>
<li><a class="sub-menu" href="musik.html">Musik</a></li>
<li><a class="sub-menu" href="literatur.html">Literatur</a></li>
</ul>
<p class="navi-menu">MENÜ D</p>
<ul>
<li id="navi07"><a href="kontakt.html">Kontakt</a></li>
<li id="navi08"><a href="impressum.html">Impressum</a></li>
</ul>
<p class="navi-menu">MENÜ E</p>
<ul>
<li id="navi09"><a href="sprachen.html">English</a></li>
</ul>
</div><!-- Ende navigation -->
CSS dazu:
#navigation {
background: #CD853F;
border: 2px solid #FFD700;
float:right;
font-size: 110%;
list-style-type: none;
margin-top: 15px;
width: 20%;
}
#navigation li {
list-style-type: none;
}
.navi-menu {
border-top: 1px dashed #000000;
font-size: 80%;
font-weight: bold;
margin-top:15px;
}
#navigation a {
color: maroon;
font: 14px arial, verdana, helvetica, sans-serif;
text-decoration: none;
outline: none;
}
#navigation a:visited {
color: #bea46d;
}
#navigation a:hover, a:active, a:focus {
color: #FFFFF0;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 2px;
}
Vielen Dank fürs Rüberschaun und noch einen schönen Sonntag!
Knuth