Perfect dropdown menu

<!DOCTYPE>
<html>

<body>

    <div class = 'dropdown'>

    <button class = 'dropbtn'>Button</button>

    <div class = 'dropdown-content'>

        <a href = '#'>Link 1</a>

        <a href = '#'>Link 2</a>

        <a href = '#'>Link 3</a>

        </div>

    </div>

    </body>

    <style>

        .dropbtn {

            padding: 16px 16px;
            background-color: black;
            color: white;
            text-decoration: none;
            font-family: sans-serif;
            margin: 10px;
            font-size: 15px;
            border: none;
        }

        .dropdown-content {

            display: none;
            position: absolute;
            background-color: white;
            min-width: 160px;
            box-shadow: 0px 16px 8px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {

            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {background-color: gray;}

        .dropdown:hover .dropdown-content {display: block;}

        .dropbtn:hover {background-color: #2D3030;}

</style>

</html>