navicationsleiste mit unterlinks

Wenn ich mit der Maus auf den Button „Test“ gehen erscheint eine Liste mit unterlinks. Ich möchte jetzt noch eine weitere Liste. Ich zeige euch wie ich es haben möchte:

Test

Test1 ← Test1.1
Test2 Test1.2
Test3 Test1.3

Wenn ich auf Test gehe öffnet sich die Liste mit Test1, Test2, Test3 und wenn ich auf Test1 gehe öffnet sich dann die Test1.1, Test1.2, Test1.3 Liste und wie mache ich das am besten?
Die Liste Test1.1, Test1.2, Test1.3 sollte sich nach rechts öffnen.

Das ist ein simples Aufklappmenü. Beispiele dafür findet man im Netz viele unter diesem Begriff.

Vertikales Ausklapp-Menü

Das Aufklappmenü habe ich schon.

Ih möchte genau das gleiche Menü wie auf dieser Seite:
Stu Nicholls | CSSplay | Validating drop down cross-browser menu
Wenn man mit der Maus auf „Demos“ klickt öffnet sich eine Liste und wenn man dann auf „Hover/Click“ mit der Maus ist, öffnet sich wieder eine Liste und das möchte ich noch hinzufügen, bei meinem Aufklappmenü.
Habe diesen Code verwendet:

[CODE]body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}

div#Rahmen {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}

  • html div#Rahmen { /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
    }
    div#Rahmen div {
    clear: left;
    }
    ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
    }

ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}

  • html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
    }
    :first-child+html ul#Navigation li { / Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
    }

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}

  • html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
    }
    :first-child+html ul#Navigation ul { / Workaround fuer den IE 7 /
    background-color:silver; padding-bottom:0.4em;
    }
    ul#Navigation li:hover ul {
    display: block; /
    Unternavigation in modernen Browsern einblenden */
    }
    ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
    }

ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}

  • html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x /
    w\idth: 6.4em; /
    korrekte Breite fuer den IE 6 im standardkonformen Modus /
    }
    ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
    }
    li a#aktuell { /
    aktuelle Rubrik kennzeichnen /
    color: maroon; background-color: silver;
    }
    ul#Navigation li ul span { /
    aktuelle Unterseite kennzeichnen */
    background-color: maroon;
    }

div id=„Rahmen“>


  • Seite 1
  • <li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>
    
    <li><a href="#Beispiel">Seite 3</a></li>
    
    <li><a id="aktuell" href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>
    
    <li><a href="#Beispiel">Seite 5</a></li>
    
[/CODE]

Wenn Du diesen Code verwendest hast, was ist damit das Problem?

Schau dir mal das Beispiel hier an: Vertikale Ausklapp-Navigation - genau so geht es auch bei dem Menü welches Du willst. Man muss den nötigen Code nur in deinen Integrieren (Stichwort: hover zu ul ergänzen).

Habs jetzt geschafft, aber wenn ich einen weiteren Punkt einfüge, zeigt es nur einen Punkt an.

Musste noch die zwei Codes hinzufügrn:

ul#Navigation li ul ul li { margin: 0; padding: 0; position: absolute; top: -1.65em; left: 12.7em; display: none; /* Unternavigation ausblenden */ } ul#Navigation ul li:hover li { display: block; /* Unternavigation in modernen Browsern einblenden */ }
Muss ich noch etwas hinzufügen oder etwas abändern?