Dropdown etwas anders

    Hi Leute,

    ich danke jetzt schon für eure Hilfe.

    Ich wollte eine Dropdown Menu nicht wie die normalen sondern, dass einfach darunter ein Bar erscheint und dort angezeigt wird. Das habe ich auch geschafft. Es sieht jetzt so aus:
    inaktiv
    [ATTACH=CONFIG]7547[/ATTACH]
    aktiv
    [ATTACH=CONFIG]7548[/ATTACH]

    ok so weit so gut.
    Allerdings möchte ich das so nicht lassen. Ich möchte z.B. wenn ich auf der Startseite bin, dass der "10" Menü hover wie oben auf dem Bild aktiv so geöffnet ist.
    Wenn ich dann dann in der Navigation die Kategorie "50" Untermenü, "52" klicke, dass wen ich auf dieser Seite, dieser Untermenü offen bleibt.
    also so bleibt:
    [ATTACH=CONFIG]7549[/ATTACH]

    Ich hab wirklich überall recherchiert und hab nichts der Art gefunden.

    Ich füge euch auch mal die CSS Daten mit, wie ich das so gemacht habe...


    #nav-main {


    margin: 0; padding: 0;
    margin-bottom: 30px;
    float: left;

    list-style: none;
    position: relative;
    font-size: 17px;
    //background-color: #1b283d;

    }


    #nav-main ul li {
    float: left;
    margin: 0;
    padding: 0;


    }
    #nav-main ul li:first-child {
    float: left;
    margin: 0;
    padding: 0;


    }


    #nav-main ul li a {
    margin-left: 15px;
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;

    }


    #nav-main ul li:hover a {
    background: #19a1de;

    }


    #nav-main ul li:hover a:hover {
    display: block;


    }


    #nav-main ul li ul {


    float: left;
    padding: 0px 0;
    position: absolute;
    left: 0; top:36px;
    font-size: 11px;
    display: none;
    font-size: 12px;
    background: #19a1de;
    width: 100%;
    color: #fff;


    }


    #nav-main ul li ul a {


    padding: 7px 10px;


    }


    #nav-main ul li:hover ul {


    display: block;


    }

    #bost {
    margin-left: ;
    margin-top: 61px;
    height: 31px;
    width: 546px;

    position: absolute;
    }

    #nav-main ul li:hover:last-child ul {


    }


    #nav-main ul li:hover ul li a {


    }


    #nav-main ul li:hover ul li:last-child a {


    }


    #nav-main ul li:hover ul li a:hover {

    background-color: #1987bc;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;


    }

    Einmal editiert, zuletzt von cankoc (1. Juni 2013 um 11:48)

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Anhänge funktionieren nicht und auf das versprengte CSS hab ich keine Lust. Mach mal ordentlich, dann schaun wir weiter... ;)

    Huh Entschuldigung. Ich probiere es noch ein mal :)
    Kurz nochmal: ich möchte einfach die Untermenü immer offen haben. Entsprechend halt...
    1. Anhang:

    2. Anhang:

    3. Anhang:

    CSS Daten:
    #nav-main {
    margin: 0; padding: 0;
    margin-bottom: 30px;
    float: left;
    list-style: none;
    position: relative;
    font-size: 17px;
    }


    #nav-main ul li {
    float: left;
    margin: 0;
    padding: 0;
    }


    #nav-main ul li:first-child {
    float: left;
    margin: 0;
    padding: 0;
    }


    #nav-main ul li a {
    margin-left: 15px;
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
    }


    #nav-main ul li:hover a {
    background: #19a1de;
    }


    #nav-main ul li:hover a:hover {
    display: block;
    }


    #nav-main ul li ul {
    float: left;
    padding: 0px 0;
    position: absolute;
    left: 0; top:36px;
    font-size: 11px;
    display: none;
    font-size: 12px;
    background: #19a1de;
    width: 100%;
    color: #fff;
    }


    #nav-main ul li ul a {
    padding: 7px 10px;
    }


    #nav-main ul li:hover ul {
    display: block;
    }


    #bost {
    margin-left: ;
    margin-top: 61px;
    height: 31px;
    width: 546px;
    position: absolute;
    }


    #nav-main ul li:hover ul li a:hover {
    background-color: #1987bc;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

    Einmal editiert, zuletzt von cankoc (1. Juni 2013 um 13:37)

    Wenn man den Beitrag erweitert editiert, gibt es eine CODE-Schaltfläche... der Übersichtlichkeit wegen... und eine Seite, wo man sich das anschauen kann, wäre hilfreich. ;)

    Trotzdem probier ich es: Die 2. Ebene sollte relativ positioniert sein. :)

    ah:!:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden