'In dropdown menu, sub-menu are not showing properly and submenus is showing inside main menu

Description: I'm trying to create a navbar. I am using the bootstrap 4 framework for that but the problem is I have simply copied the simple navbar code without dropdown and when I'm trying to create a custom dropdown then it is showing in the main menu due to which the height of the main menu bar also increases. How can I show a sub-menu outside the main menu bar?





    *{
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    ul{
        list-style: none;
        width: auto;
        height: 100%;
    }

    ul li{
        margin: 0;
        /* border: 1px solid turquoise; */
        width: 9em;
        padding: 5px 0;
        text-align: center;
        position: relative;
    }

    /* Showing border bottom animation for the main-menu */
    ul li::after{
        content: '';
        position: absolute;
        border-bottom: 3px solid #f3007f;
        transform: scale(0, 1);
        transition: transform .5s ease;
        width: 100%;
        left: 0;
    }

    ul li:hover::after{
        transform: scale(1, 1);
    }

    /* Showing background: black and font color:white when hovering over the main-menu */
    ul li a {
        display: block;
        color: white;
    }

    ul li a:hover{
        background-color: black;
        color: white;
    }


    .logo {
        width: 4vw;
    }

    /* Styling the main menu */
    .navbarbg {
        background: #10044a;
        color: white;
        font-weight: bold;
    }

    /* Centering the main-menu elements */
    .listpos{
        justify-content: center;   
    }

    /* This code is for hiding sub-menus */
    ul li ul li {
        display: none;
    }

    /* This code is for showing sub-menus when hovering over main menu */
    ul li:hover ul li {
        display: block;
        color: white;
    }


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

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://kit.fontawesome.com/f3e31b33a9.js" crossorigin="anonymous"></script>
        <title>Document</title>
    </head>

    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-expand-lg navbarbg">
                        <div class="col-md-2">
                            <img src="./images/ICC-Mens-T20-World-Cup-2021.jpg" class="img-fluid logo" alt="">
                        </div>
                        <div class="collapse navbar-collapse col-md-8 listpos">
                            <ul class="navbar-nav">
                                <li class="nav-item active"><a class="nav-link" href="#">Home 
                                    <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item"><a class="nav-link" href="#">Matches</a></li>
                                <li class="nav-item"><a class="nav-link" href="#">Standings</a></li>

                                <!-- This is the dropdown code Starting -->
                                <li class="nav-item">
                                    <a class="nav-link">Dropdown</a>
                                    <ul class=""  aria-labelledby="navbarDropdown">
                                      <li><a class="" href="#">Action</a></li>
                                      <li><a class="" href="#">Another action</a></li>
                                    </ul>
                                </li>
                                <!-- This is the dropdown code Ending -->

                                <li class="nav-item"><a class="nav-link" href="#">News</a></li>
                                <li class="nav-item"><a class="nav-link" href="#">Videos</a></li>
                            </ul>
                        </div>

                        <div class="col-md-2 text-right">
                            <b>Search</b>
                            <span class="ml-1">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </span>
                        </div>
                    </nav>
                </div>
            </div>

        </div>
    </body>

    </html>

Showing the snapshot for the issue

htmlcssbootstrap-4drop-down-menusubmenu


Solution 1:[1]

At the very top of your this is the dropdown is starting...

A very important dropdown class is missing from the li. It should read like this <li class="nav-item dropdown">.

Each of the links in the dropdown could then also use a class added too. Each of the links should contain class="dropdown-item"

Hopefully that will fix things but other people may spot things that I didn't.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cutey from Cute Code

Related Questions