Article Categories

Selected Reading

How to create a subnavigation menu with CSS?

CSS Web Development Front End Technology

A subnavigation menu is a secondary menu that appears below or within the main navigation. It provides additional navigation options for specific sections and typically appears when hovering over a main menu item using the CSS :hover selector.

Syntax

.subnav:hover .sub-content {
    display: block;
}

Basic HTML Structure

The main navigation uses the <nav> element with nested divs for submenu containers −

<nav>
   <a href="#">Main Link</a>
   <div class="subnav">
      <button class="sub-btn">Dropdown Button</button>
      <div class="sub-content">
         <a href="#">Sublink 1</a>
         <a href="#">Sublink 2</a>
      </div>
   </div>
</nav>

Example: Complete Subnavigation Menu

The following example creates a horizontal navigation bar with a dropdown submenu that appears on hover −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
    }
    
    nav {
        overflow: hidden;
        background-color: #2c3e50;
    }
    
    nav .links {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        transition: background-color 0.3s;
    }
    
    nav .links:hover {
        background-color: #34495e;
    }
    
    .subnav {
        float: left;
        overflow: hidden;
    }
    
    .subnav .sub-btn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: #27ae60;
        margin: 0;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .subnav:hover .sub-btn {
        background-color: #2ecc71;
    }
    
    .sub-content {
        display: none;
        position: absolute;
        left: 0;
        background-color: #27ae60;
        width: 100%;
        z-index: 1;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .sub-content a {
        float: left;
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        transition: background-color 0.3s;
    }
    
    .sub-content a:hover {
        background-color: #229954;
    }
    
    .subnav:hover .sub-content {
        display: block;
    }
</style>
</head>
<body>
    <nav>
        <a class="links" href="#">Home</a>
        <a class="links" href="#">Services</a>
        <a class="links" href="#">About</a>
        <div class="subnav">
            <button class="sub-btn">Social Media</button>
            <div class="sub-content">
                <a href="#">Facebook</a>
                <a href="#">Twitter</a>
                <a href="#">LinkedIn</a>
                <a href="#">Instagram</a>
            </div>
        </div>
        <a class="links" href="#">Contact</a>
    </nav>
    
    <div style="padding: 20px;">
        <h2>Hover over "Social Media" to see the submenu</h2>
        <p>The submenu will appear below the navigation bar when you hover over the Social Media button.</p>
    </div>
</body>
</html>

A horizontal navigation bar with dark blue background appears. When hovering over the green "Social Media" button, a dropdown submenu with social media links (Facebook, Twitter, LinkedIn, Instagram) slides down below the main navigation.

Key CSS Properties

Property	Purpose
`display: none`	Hides submenu by default
`position: absolute`	Positions submenu relative to viewport
`:hover`	Shows submenu on mouse hover
`z-index`	Ensures submenu appears above other content

Conclusion

Creating subnavigation menus with CSS involves using the :hover pseudo-selector to toggle visibility and absolute positioning for proper placement. The key is hiding the submenu with display: none and revealing it on hover.

AmitDiwan

Updated on: 2026-03-15T14:20:42+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next