{CSS-HTML] Navigation - Problem

    Hey Community,


    Ich muss jetzt auf meiner Übungspage eine Navigationbar mit CSS machen.


    Es soll so aussehen:



    Bei mir sieht es aber so aus:



    Ich will das beim Hover die ganze "Box" gefärbt wird und nicht nur um die Schrift.


    Sagt mir bitte was ich anhängen soll da ich relativ neu bin in der Sache.


    body{
    font-family: Source Sans Pro Semibold;
    margin:0;
    padding:0;
    }


    .container{
    width:100%;
    margin: 0% auto;
    }
    .logo{
    float:left;
    padding:10px 0;
    }
    header{
    background: black;
    }


    header::after{
    content: '';
    display: table;
    clear:both;
    }
    nav{
    float:left;
    }
    nav a{
    color:white;
    text-decoration:none;
    }
    nav ul{
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style:none;
    }


    nav li{
    margin-right:70px;
    padding-bottom:15px;
    padding-left:40px;
    height:30px;
    display: inline-block;
    text-align:center;
    text-decoration:none;
    line-height:35px;
    }
    nav a:hover{
    background-color:#ddd;
    color:black;
    }


    Danke im Voraus.
    MfG

    Zum einen solltest du entweder dein li eine feste Höhe height geben oder deinem ul > li > a eine line-height.


    Zum anderen liegt der Hover Effekt daran, dass du ihn beim a detectest. Du solltest ihn beim li detecten, denn sobald du über das a hoverst, hoverst du auch über das Parent Element (solange es nicht absolut platziert ist oder durch ein margin u.ä. verschoben ist). Also einfach über li:hover die border-bottom setzen und fertig. Bspw.
    Außerdem empfehle ich dir transitions einfach mal nach googlen. Ist echt hübsch fürn Anfang