html css dropdown | hover drop down | css animation | css dropdown | Hoverable Dropdown

Create A Hoverable Dropdown

website : here

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>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="dropdown">
        <div class="dropbtn">DropDown</div>
        <div class="drop-content">
            <a href="#">link1</a>
            <a href="#">link2</a>
            <a href="#">link3</a>
            <a href="#">link4</a>
            <a href="#">link5</a>
        </div>
    </div>
</body>

</html>

CSS

.dropbtn {
    background-color: aqua;
    padding: 10px;
    width: 200px;
    text-align: center;
    border-radius: 5px;
}

.drop-content {
    display: none;
    position: absolute;
    min-width: 200px;
    background-color: lightblue;
    border-radius: 5px;
    box-shadow: 1px 1px 8px rgba(1, 1, 1, 0.5);
    z-index: 1;
}

.drop-content a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 10px;
    border-radius: 5px;
}

.drop-content a:hover {
    background-color: aqua;
}

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

lazcoder

html css dropdown | hover drop down | css animation | css dropdown | Hoverable Dropdown | Create A Hoverable Dropdown