Denkfehler beim submenü

[Sauerwald]

Hallo Leute,

ich habe Probleme mit der css Zuweisung des Untermenüs.
Evtl. bin ich doch zu blöd
Ich versuche auf der Seite www.sauerwald.net für meinen Heimatort eine neue Seite zu erstellen.
Leider verzweifele ich am Untermenü.
Unter Vereine - Schützenverein - Schützenfeste sieht man das Sub Menü.
Soweit kein Problem. Nur bin ich doch zu blöd das richtig anzusteuern. Etwas eingerückt die Unterpunkte z.B.
Rahmen drum herum und so weiter.
Leider weiss ich nicht wirklich wie ich die Punkte entsprechend ansteuern muss.

Ich habe mal ein Screenshot angehangen.

Über ein paar kurze Gedanken Anstupser würde ich mich sehr freuen.

Danke schon mal im Vorraus

Gruß

Markus

[Spooky]

Das Problem ist, dass du in deiner layout.css ein aggressives CSS Reset benutzt, dass bspw. die Margins aller Elemente (inkl. Listen) eliminert:

* {
    margin:0;
    padding:0;
    /* remove blue highlight color on (some) mobile devices */  
    -webkit-tap-highlight-color: rgba(155, 155, 155, 0);
}

Du musst die Einrückungen nun wieder per CSS herstellen. Viele Wege führen hier zum Ziel. Mein Vorschlag, wenn du dein Margin Reset behalten möchtest:

ul {
    padding-left:1em;
}

ul.level_1 {
    padding-left:0;
}

[Sauerwald]

Hallo Spooky,

danke schon mal für Deine Antwort.

<nav class="mod_navigation nav_sub block" role="off-canvas"

Ist es denn richtig die Klasse nav_sub so anzugeben?


Es sollen ja nur die Untermenüs rechts so dargestellt werden.

.nav_main {
    height:6rem;
    position:relative;
    overflow:visible;
    display:block;
    text-align:center;
    background-color:#$col3a;
    box-sizing: border-box;
    /* Show hidden level */;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 4005 erstellen

Subnavigation
.nav_sub {
    position:relative;
    overflow:visible;
    display:block;
    text-align:center;
    background-color:#$col3a;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3347 erstellen

.nav_main .level_1 {
    width:96rem;
    display:inline-block;
    margin:0 auto;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3348 erstellen

.nav_main .level_1 li {
    position:relative;
    float:left;
    list-style: none;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3349 erstellen

.nav_main .level_1 li a,
.nav_main .level_1 li a:link,
.nav_main .level_1 li a:visited {
    display:block;
    padding:0 1.5rem;
    font:1.8rem "Open Sans",Arial,Verdana,sans-serif;
    text-decoration:none;
    color:#$col2a;
    font-weight: 300;
    line-height: 6rem;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3350 erstellen

.nav_main .level_1 li a:hover,
.nav_main .level_1 li a:focus,
.nav_main .level_1 li a:active {
    background-color:#$col1a;
    color: #$col99;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3351 erstellen

.nav_main .level_1 li span.active,
.nav_main .level_1 li a.trail,
.nav_main .level_1 li span.trail {
    display:block;
    padding:0 1.5rem;
    background-color:#$col1a;
    font-size:1.8rem;
    line-height:6rem;
    color: #$col99;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3352 erstellen

.nav_main .level_2,
.nav_main .level_3 {
    min-width:19rem;
    top:6rem;
    position:absolute;
    display:none;
    padding:0;
    text-align:left;
    background-color:#$col3a;
    left: 0;
    z-index: 100;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 4006 erstellen

Subnavigation
.nav_sub .level_2,
.nav_sub .level_3 {
    background-color:#$col3a;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3353 erstellen

.nav_main .level_2 li,
.nav_main .level_3 li {
    float:none;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3354 erstellen

.nav_main .level_2 li span.active,
.nav_main .level_2 li .active,
.nav_main .level_2 li .trail,
.nav_main .level_3 li span.active,
.nav_main .level_3 li .active,
.nav_main .level_3 li .trail {
    padding:1.5rem;
    background-color:#$col1b;
    font-size:1.6rem;
    line-height:2rem;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3355 erstellen

.nav_main .level_2 li a,
.nav_main .level_2 li a:link,
.nav_main .level_2 li a:visited,
.nav_main .level_3 li a,
.nav_main .level_3 li a:link,
.nav_main .level_3 li a:visited {
    padding:1.5rem;
    white-space:nowrap;
    font-size:1.6rem;
    line-height:2rem;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 3356 erstellen

.nav_main .level_2 li a:hover,
.nav_main .level_2 li a:focus,
.nav_main .level_2 li a:active,
.nav_main .level_3 li a:hover,
.nav_main .level_3 li a:focus,
.nav_main .level_3 li a:active {
    background-color:#$col1b;
    color:#$col99;

[Samuell]

Die Klasse ist da gut aufgehoben.
Damit kannst Du dann ohne weiteres die Navigation ansteuern.

zB:

.nav_sub ul {
    list-style: none;
}