style.scss

body{
    margin: 0;
    padding: 0;
    background-color: #34495e;
}

h1{
    text-align: center;
    background-color: #f1c40f;
    margin: 0;
    padding: 20px;
}

nav#nav1,nav#nav2,nav#nav3{
    margin: 50px auto auto;
    text-align: center;
    .title{
        background-color: #ecf0f1;
        color: black;
        display: inline-block;
        margin: 0;
        padding: 10px;
        box-shadow: 0 0 10px rgba(0,0,0, 0.5)
    }
    .menu{
        margin: 20px 0 0;
        list-style-type: none;
    }
    li{
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        cursor: pointer;

        &:hover span{
            height: 100%;
        }
        &:hover a{
            color: white;
        }
        span{
            position: absolute;
            top: 0;
            left: 0;
            width: 25%;
            height: 0;
            background-color: black;
            transition: all 0.1s linear;
            z-index: -1;
            &:nth-child(2){
                left: 25%;
                transition-delay: 0.1s;
            }
            &:nth-child(3){
                left: 50%;
                transition-delay: 0.2s;
            }
            &:nth-child(4){
                left: 75%;
                transition-delay: 0.3s;
            }
        }
    }
    a{
        color: white;
        text-decoration: none;
    }
}

/*This navigation 2 changes*/
nav#nav2{
    li{
        span{
            transition-delay: 0.4s;
            &:nth-child(2){
                left: 25%;
                transition-delay: 0.3s;
            }
            &:nth-child(3){
                left: 50%;
                transition-delay: 0.2s;
            }
            &:nth-child(4){
                left: 75%;
                transition-delay: 0.1s;
            }
        }
    }
}

/*This navigation 3 changes*/
nav#nav3{

    li{
        &:hover span{
            width: 100%;
            height: 25%;
        }
        span{
            left: 0;
            width: 0;
            height: 25%;

          &:nth-child(2){
            top: 25%;
            left: 0;  
        }
        &:nth-child(3){
            top: 50%;
            left: 0;
        }
        &:nth-child(4){
            top: 75%;
            left: 0;
        }
        }
    }
}

/*This navigation 4 changes*/
nav#nav4{
    text-align: center;
    margin: 50px auto 50px auto;
    .title{
        background-color: #ecf0f1;
        color: black;
        display: inline-block;
        margin: 0;
        padding: 10px;
        box-shadow: 0 0 10px rgba(0,0,0, 0.5)
    }
    .menu {
        list-style-type: none;

    }
    li{
        position: relative;
        padding: 10px 20px;
        display: inline-block;
        cursor: pointer;
        &:hover span{
            width: 100%;
        }
        a{
            color: white;
           text-decoration: none;
        }
        span{
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 25%;
            background-color: black;
            transition: width 0.2s;
            z-index: -1;
            &:nth-child(2){
                top: 25%;
                right: 0;
                transition-delay: 0.1s;
            }
            &:nth-child(3){
                top: 50%;
                right: 0;
                transition-delay: 0.2s;
            }
            &:nth-child(4){
                top: 75%;
                right: 0;
                transition-delay: 0.3s;
            }
        }
    }
}