Css Menü vertikal aufklappbar

Öhm.. das ist theoretisch genau das selbe wie oben
Einfach mal rum probieren?^^ Spontan hab ich dafür nämlich auch kein Musterbeispiel Solltest du aber Probleme haben, setzte ich mich nach meinem Powernapping kurz für dich hin :wink:

(wobei ich dieses durchscheinende irgendwie nicht mag.. wirkt so, als ob du 20.000 verschiedene Schwarz/Grautöne verwendet hättest..
Aber das ist ja nur meine Meinung :mrgreen: )

Es wäre praktisch, wenn du deinen Code mal posten könntest, damit man ggf. Fehler sehen kann.
Ansonsten hat die Durchsichtigkeit mit der Funktion des Menus eigentlich nichts zu tun.
Anbieten könnte ich spontan nur einen Muster-Code für ein Menue, was dann nach rechts ausklappt.

Hier ist mal ein Beispiel:

* {padding:0;margin:0}




    ul {
        list-style: none;
        width: 200px;
        position: relative
    }
    ul li {
        border: 1px solid #333;
        margin-bottom: -1px;
        background: #eee;
    }




    ul li a {
        display: block;
        color: #000;
        text-decoration: none;
        font-size: 16px;
        padding: 10px 7px;
    }




    ul li ul {
        display: none;
        position: absolute;
        margin-left: -1px;
        left: 100%;
        margin-top: -4em;
    }




    ul li:hover {
        background: #ccc;
    }




    ul li:hover ul {
        display: block;
    }




<!-- Für folgenden HTML-Code -->




    <ul>
        <li><a href="#">1.Punkt</a></li>
        <li><a href="#">2.Punkt</a>
            <ul>
                <li><a href="#">2.x</a></li>
                <li><a href="#">2.x</a></li>
                <li><a href="#">2.x</a></li>
            </ul>
        </li>
        <li><a href="#">3.Punkt</a></li>
        <li><a href="#">4.Punkt</a></li>
        <li><a href="#">5.Punkt</a></li>
    </ul>

mach das left weg, wenn du möchtest das die Navigation sich über die anderen Punkte blendet und zusätzlich das position, wenn du möchtest das sich die Punkte nach unten verschieben (was nervig ist :p )

Zitat von "Sarkkan"

mach das left weg, wenn du möchtest das die Navigation sich über die anderen Punkte blendet und zusätzlich das position, wenn du möchtest das sich die Punkte nach unten verschieben (was nervig ist :p )

Dann bekommst du das, was du haben willst

...ließt du eigentlich alles was ich schreibe oder immer nur bis zum ersten Komma? O_o

Guckst du hia, das letzte Menü. (Oder es klappt Mysteriöserweise nur bei mir.. <.<)

Edit: Der Link hatte sich geändert

Ja, aber du hast immer noch nicht gesagt, welches der drei Musterbeispiele du möchstest.
Zuerst einmal gilt dieser Code für alle drei Menüs aus dem Beispiel:

* {padding:0;margin:0}




    ul {
        list-style: none;
        width: 200px;
        position: relative;
        margin-bottom: 20px;
    }
    ul li {
        border: 1px solid #333;
        margin-bottom: -1px;
        background: #eee;
    }




    ul li a {
        display: block;
        color: #000;
        text-decoration: none;
        font-size: 16px;
        padding: 10px 7px;
    }




    ul li ul {
        display: none;
        margin-left: -1px;
        margin-top: -4em;
    }




    ul li:hover {
        background: #ccc;
    }




    ul li:hover ul {
        display: block
    }

Zusätzlich gilt für Musterbeispiel 1:

ul li ul.neben {
        left: 100%;
        position: absolute;
    }

Und für Musterbeispiel 2:

ul li ul.uber {
        left: 1;
        position: absolute;
    }

Und für Musterbeispiel 3:

ul li ul.zwischen {
        margin: 0;
    }

D.h. dass für Musterbeispiel 1 die auszuklappende Liste die Klasse "neben" zugewiesen bekommen muss, für Musterbeispiel 2 "uber" und für Musterbeispiel 3 "zwischen".
Alles klar?
DerWaldschrat

Zitat von &quot;adolpho&quot;

Hallo Sarkkan,

als Anfänger bin ich froh, wenn ich Unterstützung bekomme, aber wenn ich die beiden CSS-Codes vergleiche (die obige mit dem letzten Musterbeispiel - Link), so sind doch Unterschiede festzustellen und deine Bemerkung ist fehl am Platz.

Lg.
Adolpho

Nein, es sind theoretisch keine Unterschiede zu erkennen.
Wie DerWaldschrat schon richtig aufgelistet hat, hab ich das bei meiner Beispielseite nur aufgespalten.
und der Wert left:1; ist theoretisch das selbe wie left:0; was das selbe ist wie " " (also nichts :P) Nur um einen kleinen Rahmenfehler auszugleichen habe ich left:1 verwendet
Das selbe gilt für den margin-Teil. Er dient einfach nur dazu, dass es korrekt ohne fehlpositionierung (von wenigen Pixeln) angezeigt wird.
Hättest du meinen Code 1:1 übernommen und das gemacht, was ich dir gesagt habe, hättest du festgestellt, dass Links ein kleiner zwischenraum gewesen ist, den du damit entfernen konntest