nicht angemeldet
Hallo zusammen,
ich versuche gerade ein CSS Menü zu gestalten.
Ich habe als Grundstock das Beispiel von SelfHTML genommen.
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
Das nach unten aufklappen funktioniert soweit.
Ich würde jetzt zusätzlich gerne eine 3. Ebene hinzufügen das zusätzlich noch bei weiteren Untermenüs diese nach rechts aufklappen.
Die Struktur sieht wie folgt aus:
<ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<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 href="#Beispiel">Seite 4</a>
<ul>
<li><a href="#Beispiel">Seite 4a</a></li>
<li><a href="#Beispiel">Seite 4b</a>
<ul >
<li><a href="#">Seite 4b_1</a></li>
<li><a href="#">Seite 4b_2</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 4c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 5</a></li>
</ul>
Das CSS sieht so aus:
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
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.01em; padding: 0;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
left: -0.01em;
display: none; /* Unternavigation ausblenden */
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation a {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.1em 1em;
text-decoration: none; font-weight: normal;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
</style>
Die Untermenüs "Seite 4b_1, Seite 4b_2" sollen nun beim überfahren nach rechts eingeblendet werden.
Ich habe es mit diesem zusätzlichen CSS versucht.
ul#Navigation li ul li ul li{
margin: 0; padding: 0;
position: absolute;
left: -0.01em;
display: none; /* Unter-Unter Navigation (rechts) ausblenden */
}
ul#Navigation li ul li ul li:hover{
display: block; /* Unter-Unter Navigation (rechts) in modernen Browsern einblenden */
left: auto
}
Das ausblenden funktioniert soweit.
Nur werden die Untermenüs nie wieder eingeblendet.
Wo mache ich meinen Fehler?
Ich muss zugeben das ich mich mit all den CSS Angaben noch ein wenig schwer tue.
vielen Dank und viele Grüße
hawk