Hello Friends, Today in this post, we’ll learn How to Create a Responsive Multi-Level Dropdown Menu Using HTML CSS Bootstrap 5. Recently I have shared a Responsive Personal Portfolio Website Using Bootstrap-5 Part-4. But our today’s topic is responsive Multi-Level Dropdown Menu.

If Are you Looking for creative ways to design your navigation menus? Then you Have Come to the Right Place because In this article I’ll like to share inspiration on Responsive Mega Menu With Dropdown Menu styles and effects with you. Use this Responsive Mega Menu With Dropdown Menu in your next project where you want to show a Responsive Mega Menu With Dropdown Menu

Responsive Mega Menu With Dropdown Menu is the most popular and interesting modern web design. A responsive menu that takes up the entire screen when expanded. The menu is usually activated by clicking or touching the hamburger button. responsive Mega Menu With Dropdown Menu gives you the power to overlay and animate one screen on top of another.

It can simulate modal windows, dropdown navigation menus, and other on-screen prompts, all without leaving your current screen. So in this post, I will create a Responsive Mega Menu With Dropdown Menu Menu to find inspiration for your web design project. And now I’m going to create an attractive but easy Responsive Mega Menu With Dropdown Menu using Html5 CSS3.

As you all already know full-page navigation menu, that replaces the current content by pushing it off the screen. A website menu is a list of linked items that help in navigating between the different pages or sections of a website. Use this hamburger menu to Responsive Mega Menu With Dropdown Menu in your next web project.

Play Video

Typically activated by a hamburger button, the fullscreen menu is in its simplest form, an overlay that covers the entirety of the screen giving you lots of space for your menu items. It is typically used by, but not restricted to, sites with limited space as an effective replacement for the mega-menu.

If you’re all looking for some interactive Mega Menu design, this Article has a good source of Responsive Mega Menu With Dropdown Menu that you can explore, I have published this tutorial on how to create a full-width tiled menu with CSS. If you’re feeling difficult to understand what I am discussing. You can watch a full video tutorial on this article.

In the Post, you will see the Responsive Mega Menu With Dropdown Menu and I hope you’ve understood the basic codes behind creating this Article. If you like this article and want to get source codes. You can easily get the source codes of this article. To get the source codes you just need to scroll move down. You can use this post in your HTML pages, websites, and projects.

To create this program Firstly, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mega Menu Design by Code4education</title>
    
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
        
        <link rel="stylesheet" href="style.css">
    
    </head>
    
    <body>
        <header>
            <nav class="navbar navbar-expand-lg">
                <div class="container">
                    <a class="navbar-brand" href="#">MegaMenu</a>
                    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbar-content">
                        <i class="fas fa-stream text-white"></i>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar-content">
                        <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"
                                    data-bs-auto-close="outside">Multilevel</a>
                                <ul class="dropdown-menu shadow">
                                    <li><a class="dropdown-item" href="#">Gallery</a></li>
                                    <li><a class="dropdown-item" href="blog.html">Blog</a></li>
                                    <li class="dropstart">
                                        <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Submenu
                                            Left</a>
                                        <ul class="dropdown-menu shadow">
                                            <li><a class="dropdown-item" href=""> Third level 1</a></li>
                                            <li><a class="dropdown-item" href=""> Third level 2</a></li>
                                            <li><a class="dropdown-item" href=""> Third level 3</a></li>
                                            <li><a class="dropdown-item" href=""> Third level 4</a></li>
                                            <li><a class="dropdown-item" href=""> Third level 5</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropend">
                                        <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown"
                                            data-bs-auto-close="outside">Submenu Right</a>
                                        <ul class="dropdown-menu shadow">
                                            <li><a class="dropdown-item" href=""> Second level 1</a></li>
                                            <li><a class="dropdown-item" href=""> Second level 2</a></li>
                                            <li><a class="dropdown-item" href=""> Second level 3</a></li>
                                            <li class="dropend">
                                                <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown"
                                                    data-bs-auto-close="outside">Let's go deeper!</a>
                                                <ul class="dropdown-menu dropdown-submenu shadow">
                                                    <li><a class="dropdown-item" href=""> Third level 1</a></li>
                                                    <li><a class="dropdown-item" href=""> Third level 2</a></li>
                                                    <li><a class="dropdown-item" href=""> Third level 3</a></li>
                                                    <li><a class="dropdown-item" href=""> Third level 4</a></li>
                                                    <li class="dropend">
                                                        <a href="#" class="dropdown-item dropdown-toggle"
                                                            data-bs-toggle="dropdown">Still don't have enough? Go much
                                                            deeper!</a>
                                                        <ul class="dropdown-menu dropdown-submenu shadow">
                                                            <li><a class="dropdown-item" href=""> Third level 1</a></li>
                                                            <li><a class="dropdown-item" href=""> Third level 2</a></li>
                                                            <li><a class="dropdown-item" href=""> Third level 3</a></li>
                                                            <li><a class="dropdown-item" href=""> Third level 4</a></li>
                                                            <li><a class="dropdown-item" href=""> Third level 5</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li><a class="dropdown-item" href=""> Third level 5</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item dropdown dropdown-mega position-static">
                                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"
                                    data-bs-auto-close="outside">Megamenu</a>
                                <div class="dropdown-menu shadow">
                                    <div class="mega-content px-md-4">
                                        <div class="container-fluid">
                                            <div class="row">
                                                <div class="col-lg-3 col-sm-6 py-4 px-xl-5 px-4">
                                                    <h5>Service</h5>
                                                    <div class="list-group">
                                                        <a class="list-group-item" href="#">Accomodations</a>
                                                        <a class="list-group-item" href="#">Terms & Conditions</a>
                                                        <a class="list-group-item" href="#">Privacy</a>
                                                        <a class="list-group-item" href="#">Lorum</a>
                                                        <a class="list-group-item" href="#">Lorum</a>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3 col-sm-6 py-4 px-xl-5 px-4">
                                                    <h5>Service</h5>
                                                    <div class="list-group">
                                                        <a class="list-group-item" href="#">Accomodations</a>
                                                        <a class="list-group-item" href="#">Terms & Conditions</a>
                                                        <a class="list-group-item" href="#">Privacy</a>
                                                        <a class="list-group-item" href="#">Lorum</a>
                                                        <a class="list-group-item" href="#">Lorum</a>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3 col-sm-6 py-4 px-xl-5 px-4">
                                                    <h5>Service</h5>
                                                    <div class="list-group">
                                                        <a class="list-group-item" href="#">Accomodations</a>
                                                        <a class="list-group-item" href="#">Terms & Conditions</a>
                                                        <a class="list-group-item" href="#">Privacy</a>
                                                        <a class="list-group-item" href="#">Lorum</a>
                                                        <a class="list-group-item" href="#">Lorum</a>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3 col-sm-6 py-4 px-xl-5 px-4">
                                                    <h5>Service</h5>
                                                    <div class="list-group">
                                                        <a class="list-group-item" href="#">Accomodations</a>
                                                        <a class="list-group-item" href="#">Terms & Conditions</a>
                                                        <a class="list-group-item" href="#">Privacy</a>
                                                        <a class="list-group-item" href="#">Lorum</a>
                                                        <a class="list-group-item" href="#">Lorum</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                            </li>
                        </ul>
                        <form class="d-flex ms-auto">
                            <div class="input-group">
                                <input class="form-control border-0 mr-2" type="search" placeholder="Search"
                                    aria-label="Search">
                                <button class="btn border-0" type="submit">Search</button>
                            </div>
                        </form>
                    </div>
                </div>
            </nav>
        </header>
    
        <section class="my-5">
        </section>
    
        <footer class="bg-dark p-4 text-white text-center">
            <p class="p-0">Copyright <a href="#">© CODE4EDUCATION.</a> All Rights Reserved</p>
        </footer>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
    </body>
    
    </html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;900&display=swap');

body {
                background: #3F3B51;
                font-family: 'Roboto Slab', serif;
            }
            
            button:focus,
            .navbar-toggler:focus {
                outline: none;
                box-shadow: none;
            }
            
            header {
                background-color: #008489;
                padding: 15px 0;
            
            }
            
            .navbar-brand {
                font-size: 40px;
                font-weight: 700;
                color: #0AEDED;
                -webkit-text-stroke: #fff 1px;
            
            }
            
            .navbar-brand:hover {
                color: #3F3B51;
            
            }
            
            .navbar-nav .nav-item {
                margin: 0 10px;
            }
            
            .navbar-nav .nav-link {
                font-size: 16px;
                font-weight: 400;
                color: #fff;
                display: inline-block;
            }
            
            .dropdown-menu .dropdown-item {
                margin-bottom: 10px;
            }
            
            .dropdown-menu .dropdown-item:hover {
                background-color: #008489;
                color: #fff;
            }
            
            .dropdown-mega .dropdown-menu {
                width: 100%;
            }
            
            .dropdown-mega h5 {
                padding-bottom: 12px;
                border-bottom: 1px solid rgba(0, 0, 0, .125);
                margin: 0;
            }
            
            .list-group-item {
                font-size: 16px;
                color: #3F3B51;
                border: 0;
                border-bottom: 1px solid rgba(0, 0, 0, .125);
                padding: 12px 0;
            }
            
            .list-group-item:hover {
                color: #008489;
            }
            
            .btn {
                background-color: #0AEDED;
            }
            
            section {
                height: 100vh;
            }
            footer a{
                color: #0AEDED;
            
            }
            
            /* Responsive */
            @media(max-width: 991.5px) {
                .navbar-brand {
                    font-size: 30px
                }
            
                .navbar-nav .nav-item {
                    margin: 5px 10px;
                }
            
                form {
                    margin: 30px 0;
                }
            }

2 thoughts on “Create Responsive Multi-Level Dropdown Menu Using HTML CSS Bootstrap 5.”

zoritoler imol says:

January 23, 2023 at 2:42 am

I’m really enjoying the theme/design of your site. Do you ever run into any internet browser compatibility problems? A small number of my blog readers have complained about my site not working correctly in Explorer but looks great in Opera. Do you have any suggestions to help fix this problem?

mobileautodetailingkc.com says:

August 12, 2023 at 2:31 am

Really appreciate you sharing this post.Thanks Again. Great.

Create Responsive Multi-Level Dropdown Menu Using HTML CSS Bootstrap 5.

HTML

CSS

2 thoughts on “Create Responsive Multi-Level Dropdown Menu Using HTML CSS Bootstrap 5.”

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript