Seccion Main pagina web

NavBar HTML CSS con menú

by oraclepadawan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DropDown</title><link rel="stylesheet" href="estilo.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <header>
        
        <nav>

            <input type="checkbox" id="ckbox">
            <label for="ckbox" class="drawer">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </label>

            <h1>Nintendo</h1>

            <ul class="menu-box">

                <div class="drop-down-menu">
                    <button class="drop-down-button">Inicio</button>
                </div>

                <div class="drop-down-menu">
                    <button class="drop-down-button">Consolas actuales
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="drop-down-menu-content">
                        <a href="#">Switch</a>
                        <a href="#">Wii U</a>
                        <a href="#">Switch LITE</a>
                        <a href="#">3DS</a>
                    </div>
                </div>

                <div class="drop-down-menu">
                    <button class="drop-down-button">Consolas mini
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="drop-down-menu-content">
                        <a href="#">SNES Classic Mini</a>
                        <a href="#">NES Classic Mini</a>
                    </div>
                </div>

                <div class="drop-down-menu">
                    <button class="drop-down-button">Consolas Antiguas
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div...

CSS

:root{    
    --primary:#e60012;
    --secundary:#46659b;
    --background:#35495e;
    --black-text:rgb(61, 61, 61);
    --white-text:#ffffff;
}

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    border: none;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

nav{
    background-color: var(--primary);
    height: 10vh;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header h1{
    color: var(--white-text);
    font-size: 2rem;
    letter-spacing: .7rem;
}

.drop-down-menu .drop-down-button{
    font-size: 1.2rem;
    outline: none;
    color: var(--white-text);
    padding: 1rem 1rem;
    background-color: inherit;
}

.drop-down-menu-content{
    display: none;
    position: absolute;
    background-color: var(--white-text);
    min-width: 10rem;
    box-shadow: 0 .8rem 1rem 0 rgba(0,0,00.2);
    z-index: 1;
}

.drop-down-menu:hover{
    background-color: var(--secundary);
    color: var(--white-text);
}

.drop-down-menu-content a{
    float: none;
    color: var(--black-text);
    padding: 1rem 1rem;
    display: block;
}

.drop-down-menu-content a:hover{
    background-color: var(--background);
    color: var(--white-text);
}

.drop-down-menu:hover .drop-down-menu-content{
    display: block;
}

nav ul{
    display: flex;
}

.drawer{
    font-size: 1rem;
    color: var(--white-text);
    float: left;
    cursor: pointer;
    display: none;
    margin-left: 1rem;
    border: solid .1rem var(--white-text) ;
    padding: .2rem;
    border-radius: .1rem;
}

#ckbox{
    display: none;
}

/*media query*/

@media (max-width:1039px) {
    nav{
        justify-content: flex-start;
    }

    .drawer{
        display: block;
    }

    .drop-down-menu-content{
        width: 100%;
    }

    nav h1{
        margin-left: 1rem;
    }

    ul{
        position: fixed;
        width: 50%;
        height: 100vh;
        background-color:...