Dropdown Menue in CSS

  • Bin grade dabei ein Dropdown Menü in CSS zu entwickeln. Das Menü ist Vertikal ausgerichtet und Hat verschiedene Unterpunkte, die jedoch nur erscheinen wenn man über sie hovert.


    Skizze des Menüs:



    1 Punkt
    2 Punkt
    2.1 Punkt (nicht sichtbar, nur auf hover)
    3 Punkt


    Das Problem besteht darin, dass die hover Funktion funktioniert, aber der Punkt 3 sich nicht nach unten verlagert, sondern punkt 2.1 über punkt 3 liegt. Wie bekomm ich das geregelt das der Punkt 3 dynamisch zum mouseover mit wandert? Ich hoffe jemenad hat eine Idee und kann mir helfen.


    ------------



    Quellcode:


    #navi {
    height: auto;
    width: auto;

    }
    #navi ul {
    margin: 0px;
    padding: 0px;


    list-style-type: none;
    }
    #navi ul li {
    position: relative;


    height: 15px;
    padding-top: 10px;




    }
    #navi ul li a {
    line-height: 25px;
    text-decoration: none;
    text-align: left;
    display: block;
    width: 100px;
    height: 30px;

    color: #FFF;
    background-color: black;





    }
    #navi ul li a:hover {
    background-color: #0C3;
    position: relative;


    }
    #navi ul li ul {
    position: relative;
    display: block;
    height: 15px;
    overflow:hidden;

    visibility: hidden;
    }
    #navi ul li:hover ul {

    position: absolute;

    left: 0px;
    top: 10px;
    height:auto;
    visibility: visible;
    }

  • Ich weiß nicht, ob ich dein Problem richtig verstanden habe, aber in dem Moment, wo du bei #navi ul li ul visibility:hidden setzt, reserviert er trotzdem den Platz im Layout vor. Versuche es stattdessen mal mit display: none, beim hover dann wieder display:block.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!