Probleme mit Dropdown-Menü

    Hallo,

    vorab möchte ich erwähnen, dass ich ganz neu hier bin und meine html und css Kenntnisse sehr begrenzt sind. :)

    Ich habe ein Problem mit meinem Dropdown-Menü. Wenn ich auf den Menüpunkt Produkttests oder Kleidung klicke, dann öffnet sich zwar das "Untermenü" (falls man das so nennt) jedoch verschwindet es teilweise unter dem darunter liegenden "Fenster". Das sollte natürlich nicht so sein.
    Was kann ich tun um dieses Problem zu beseitigen? :)

    Es wäre schön, wenn mir jemand diesbezüglich weiterhelfen könnte.

    http://maybebabe.blog.de

    Lg

    Folgende Angabe sollte das beheben:

    Code
    ul#subnavlist {
    position:absolute;
    z-index:20;
}

    PS: ids dürfen jeweils nur ein mal vorkommen. Ändere die ID subnavlist auf CLASS subnavlist und spreche diese per CSS mit . und nciht mit # an.

    Something big is coming. And there will be pirates and ninjas and unicorns...

    Vielen Dank für die Antwort. :)


    Sorry, aber wie bereits erwähnt ist mein Wissen was CSS und HTMl angeht begrenzt..... von daher ist mir nicht ganz klar an welche Stelle ich das setzen (ersetzen) muss.


    original Code:

    ul#navlist { font-family: sans-serif; }

    ul#navlist a
    {
    font-weight: bold;
    text-decoration: none;
    }

    ul#navlist, ul#navlist ul, ul#navlist li
    {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }

    ul#navlist li { float: left; }

    ul#navlist li a
    {
    color: #5C4A4A;
    background-color: #ECE6E6;
    padding: 3px;
    border: 1px #ffffff outset;
    }

    ul#navlist li a:hover
    {
    color: #ECE6E6;
    background-color: #5C4A4A;
    }

    ul#navlist li a:active
    {
    color: #5C4A4A;
    background-color: #ECE6E6;
    border: 1px #ffffff inset;
    }

    ul#subnavlist { display: none; }
    ul#subnavlist li { float: none; }

    ul#subnavlist li a
    {
    padding: 0px;
    margin: 0px;
    }

    ul#navlist li:hover ul#subnavlist
    {
    display: block;
    position: absolute;
    font-size: 8pt;
    padding-top: 5px;
    }

    ul#navlist li:hover ul#subnavlist li a
    {
    display: block;
    width: 10em;
    border: none;
    padding: 2px;
    }

    ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }

    Ergänze mal diese Zeile:

    Code
    ul#navlist li { float: left; }


    damit es so aussieht

    Code
    ul#navlist li { float: left; z-index: 20; }

    Bandit, z-index funktioniert nur in Verbindung mit position. Die Lösung, das nur auf li zu geben, schränkt die Designfreiheit ein. sollte lieber aufs ul.
    Aber ich hab den Übeltäter grad gefunden:

    Code
    ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}


    Diesen Teil änderst du auf das:

    Code
    ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
z-index: 20;
font-size: 8pt;
padding-top: 5px;
}

    Something big is coming. And there will be pirates and ninjas and unicorns...

    Zitat von Dodo

    Bandit, z-index funktioniert nur in Verbindung mit position.


    Wenn ich im Firebug an dieser Stelle den z-Index einbaue, funktioniert es aber.

    Zitat von Bandit

    Wenn ich im Firebug an dieser Stelle den z-Index einbaue, funktioniert es aber.


    Was aber trotzdem nicht heißt, dass das jeder Browser so interpretiert. (Ich denk dabei an z.B. Internet Explorer in unterschiedlichen Ausführungen)
    Außerdem bleibt noch immer das Problem mit der Design-Einschränkung bei Änderungen.

    Something big is coming. And there will be pirates and ninjas and unicorns...

    Vielen Dank Dodo, das hat super auf Anhieb funktioniert. Ich freue mich sehr darüber und hätte nicht gedacht, dass hier so schnell und einfach geholfen werden kann. :)

    Vielen Dank auch für Deine Antwort Bandit.