Bootstrap Dropdown On Hover CSS
Live Preview Compare Hosting

Bootstrap Dropdown On Hover CSS

Bootstrap dropdown on hover with CSS example whereby you will get the best CSS trick to solve the question “How to make Bootstrap navbar menu dropdown on hover rather than click”.

Note: The dropdown CSS will be working on any bootstrap dropdown buttons.

If you want, the Bootstrap menu automatically on hover, without the click on menu title or arrow. So you need to add the following CSS code in your style CSS and take your cursor on the dropdown menu and the dropdown submenus will open.

Add Dropdown CSS

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0px;
}

Dropdown Menus On Hover Full Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How To Make Bootstrap Dropdown On Hover with CSS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://www.markuptag.com/bootstrap/5/css/bootstrap.min.css">
    <style>
        .dropdown:hover .dropdown-menu {
            display: block;
            margin-top: 0px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#"><b>MarkupTag</b></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav float-right">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Services
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item" href="#">Services One</a></li>
                            <li><a class="dropdown-item" href="#">Services Two</a></li>
                            <li><a class="dropdown-item" href="#">Services Three</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Properties
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item" href="#">Properties one</a></li>
                            <li><a class="dropdown-item" href="#">Properties Two</a></li>
                            <li><a class="dropdown-item" href="#">Properties Three</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Bootstrap JS -->
    <script src="https://www.markuptag.com/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Leave a Comment