How To Create a More Button in a Navigation Bar using CSS?

Last Updated : 24 May, 2024

Adding a More button in a navigation bar is used to handle overflow items when there is insufficient space to display all navigation links. We will explore how to implement a More button using CSS.

Approach

Create a web page structure using the <nav> element, which contains list items for each navigation link.
Include a list item for the "More" button that contains another list for the dropdown content.
Set list-style: none to remove default list styles, and apply padding: 0 and margin: 0 to remove default spacing.
Apply display: flex to the navigation bar to display items in a row.
By default, hide the dropdown content by setting display: none.
Use the :hover pseudo-class to show the dropdown content when the More button is hovered over.

Example: The example below shows how to create a More Button in a Navigation Bar using CSS.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: whitesmoke;
        }

        .nav-bar {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            background-color: rgb(28, 160, 28);
        }

        .nav-bar li {
            position: relative;
        }

        .nav-bar a {
            text-decoration: none;
            padding: 10px;
            display: block;
            color: white;
            font-size: larger;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            top: 100%;
            width: 130%;
            left: 0;
            list-style: none;
            padding: 0;
            margin: 0;
            background-color: white;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

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

        .dropdown-content li a {
            color: black;
            padding: 10px;
            display: block;
            text-decoration: none;
        }

        .dropdown-content li a:hover {
            background-color: rgb(202, 241, 202);
        }
    </style>
</head>

<body>
    <nav>
        <ul class="nav-bar">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#l">Services</a></li>
            <li class="dropdown">
                <a href="#">More▼</a>
                <ul class="dropdown-content">
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

</html>