Article Categories

Selected Reading

How to create a hoverable dropdown menu with CSS?

CSS Web Development Front End Technology

A hoverable dropdown is a dropdown menu that opens when you hover over a trigger element. This type of dropdown is commonly used in navigation menus where hovering over a menu item reveals submenu options.

Syntax

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

Method 1: Basic Hoverable Dropdown

Step 1 − HTML Structure

First, create the HTML structure using a container div, trigger element, and dropdown content −

<div class="dropdown-menu">
    <button class="menu-btn">Web Technology</button>
    <div class="menu-content">
        <a class="links" href="#">HTML</a>
        <a class="links" href="#">CSS</a>
        <a class="links" href="#">JavaScript</a>
    </div>
</div>

Step 2 − CSS Styling

Apply CSS to position the dropdown and control its visibility −

.dropdown-menu {
    position: relative;
    display: inline-block;
}

.menu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    z-index: 1;
}

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

Complete Example

Here's a complete working example of a hoverable dropdown menu −

<!DOCTYPE html>
<html>
<head>
<style>
    .menu-btn {
        background-color: #06D001;
        color: #F3FF90;
        padding: 12px 16px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
        border: none;
        cursor: pointer;
    }

    .dropdown-menu {
        position: relative;
        display: inline-block;
    }

    .menu-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 2px 8px rgba(0,0,0,0.2);
        z-index: 1;
        border-radius: 4px;
        top: 100%;
        left: 0;
    }

    .links {
        color: #333;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 14px;
        transition: background-color 0.3s;
    }

    .links:hover {
        background-color: #06D001;
        color: white;
    }

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

    .dropdown-menu:hover .menu-btn {
        background-color: #059212;
    }
</style>
</head>
<body>
    <h3>Hoverable Dropdown Example</h3>
    <p>Hover over the button below to see the dropdown menu −</p>
    
    <div class="dropdown-menu">
        <button class="menu-btn">Web Technology</button>
        <div class="menu-content">
            <a class="links" href="#">HTML</a>
            <a class="links" href="#">CSS</a>
            <a class="links" href="#">JavaScript</a>
            <a class="links" href="#">React</a>
        </div>
    </div>
</body>
</html>

A green button labeled "Web Technology" appears. When you hover over it, a dropdown menu with four white-background options (HTML, CSS, JavaScript, React) appears below the button with a subtle shadow.

Key Properties

Property	Purpose
`position: relative`	Creates positioning context for the dropdown
`position: absolute`	Positions dropdown content relative to parent
`display: none/block`	Controls dropdown visibility
`z-index`	Ensures dropdown appears above other elements

Conclusion

Creating a hoverable dropdown with CSS involves hiding the dropdown content by default and showing it when hovering over the trigger element. The key is using :hover pseudo-class with proper positioning to create an intuitive user experience.

AmitDiwan

Updated on: 2026-03-15T14:19:25+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next