HTML CSS Navbar avec liste déroulante

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .navbar a {
            float: left;
        }
        .dropdown {
            float: left;
            overflow: hidden;
        }

        .dropdown-content a {
            float: none;
            display: block;
        }
        
        /* hide the dropdown content */
        .dropdown-content {
            display: none;
            position: absolute;
            z-index: 1;
        }

        /* Show the dropdown menu on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <div class="navbar">
        <a href="#home">Home </a>
        <a href="#news">News </a>
        <div class="dropdown">
            <button class="dropbtn">Dropdown</button>
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
            </div>
        </div>
    </div>
</body>

</html>
Rocinante