CSS Contao Navigation Horizontal Level 1-3

**Chacky** · 30.03.2012, 11:09

Hallo,

ich habe eine Navigation mit der CSS-Klasse navi2 erstellt. Diese funktioniert soweit auch ganz gut, jedoch wird Level_3 bzw. Ebene 3 an der falschen Stelle angezeigt.

Da ich Level_3 absolute gesetzt habe erscheinen die Subemnüs immer an der selben Stelle. Jedoch sollten sie nur etwas verrückt neben dem Vorherigen Menü stehen.

Leider kann ich keinen Link posten, da die Seite noch local läuft.

Dazu aber ein paar Bilder.

Martini gehört normal neben Coktailgläser.
Bildschirmfoto 2012-03-30 um 11.44.48.png

Sollte ich Level_3 auf position: relative stellen, werden die zwar auf der Richtigen Höhe angezeigt, jedoch werden leere Zeilen im Level_2 angezeigt.
Bildschirmfoto 2012-03-30 um 12.00.55.png

Hier mal mein gesammter Code:

Code:

navi2 {
    left: 2px;
    position: absolute;
    top: 265px;
    width: 500px;
}
.navi2 .level_1 a {
    background: none repeat scroll 0 0 #00492B;
    border-bottom: 3px solid #FFFFFF;
    color: white !important;
    display: block;
    padding: 7px 0 7px 20px;
    text-decoration: none;
    width: 219px;
}
.navi2 .level_2 a {
    background: none repeat scroll 0 0 #9C9C9C;
    border-bottom: 3px solid #FFFFFF;
    color: white !important;
    display: block;
    padding: 7px 0 7px 20px;
    text-decoration: none;
    width: 219px;
}
.navi2 ul {
    float: left;
    position: relative;
}
ul ul {
    left: 0;
    position: absolute;
    top: 100%;
    visibility: hidden;
    width: 100%;
}
.navi2 ul ul li {
    float: none;
}
.navi2 ul ul ul {
    left: 99%;
    top: 1px;
}
.navi2 ul li:hover > ul {
    visibility: visible;
}
.navi2 .level_3 {
    margin-top: 30.5px;
    position: absolute;
    width: 550px;
}

Ich hoffe Ihr könnt mir helfen, ich kann den Fehler nicht finden.

Mfg Chacky

***hofff*** · 31.03.2012, 00:52

Hallo,

du solltest die li's der 2. Ebene auf position : relative stellen, damit sich das position: absolute der 3. Ebene am li de. 2. Ebene ausrichtet. Dann sollte es auch mit der Position klappen. Du musst aber die Werte von position: absolute der 3. Ebene noch anpassen, denn diese sind dann absolute zum li der 2. Ebene.

fg
nicky

... von meinem iPhone mit Tapatalk gesendet.