Navigation mit drop-down Menü

[knuth]

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&Uuml; A</p>

<ul><li id="navi01"><a href="index.html">Startseite</a></li></ul>

<p class="navi-menu">MEN&Uuml; 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&Uuml; 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&Uuml; 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&Uuml; 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

[Felix Riesterer]

Lieber knuth,

Der Punkt "Interessen" soll aufklappbar sein

das bedeutet, dass Du ihn in der HTML-Struktur auch den aufklappbaren Punkten überordnen solltest. Durch diese Hierarchie in HTML kannst Du dann in CSS einen sogenannten Nachfahren-Selektor verwenden. Da Du aber noch keine Hierarchie im HTML hast, bist Du noch gezwungen mit (relativ sinnfreien) IDs zu arbeiten

Quelltext:
<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>

Lieber so:

  
<ul>  
    <li class="aufklappbar"><a href="interessen.html">Interessen</a>  
        <ul>  
            <li><a href="musik.html">Musik</a></li>  
            <li><a href="literatur.html">Literatur</a></li>  
        <ul>  
    </li>  
</ul>

Da sich eine solche ul in einem Div mit der ID "navigation" befindet, solltest Du mit CSS nun keine echten Probleme mehr haben. Näheres zum nötigen CSS-Code findest Du hier: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=CSS-Basierte Navigationsleisten>.

Liebe Grüße aus Ellwangen,

Felix Riesterer.