Trying to fit in Caret with this nav menu-CodePudding

https://jsfiddle.net/alachgar/L0bxjncz/3/

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

                <a href="#mobileMenu" id="mobileBar" class="d-none ml-auto"> <i class=" "></i></a>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ml-md-auto justify-content-end" id="nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only"></span></a>
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#">Justice Server <span class="sr-only"></span></a>
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#">Westlaw <span class="sr-only"> </span></a>
                            
                        </li>
                        
                        <li>
                            
                            <a class="nav-link dropdown-toggle" data-toggle = "dropdown"  href = "#">LSNC SPN <span class = "caret sr-only"></span></a>
                            <ul class="dropdown-menu">
                                <?php
                                $conn = new mysqli('localhost', '.....', '.......', 'portal') or die("Database Connection Failed");
                                            
                                //Below We are connectin to Database and getting all items for our Menu.
                                $sql = "SELECT * FROM categories";
                                $res = mysqli_query($conn, $sql);
                                    while ($row = mysqli_fetch_array($res)) 
                                        {
                                            echo "<li class='dropdown-item'><a href='$base_url/admin/downloads.php?idx={$row['cat_code']}'><span >{$row['cat_name']}<span></a></li>";
                                        }   
                                ?>
                            </ul>                                   
                            
                        </li>

                        <li class="nav-item dd">
                            <a class="nav-link" href="#"> LSNC Sites <span class="sr-only"> </span></a>
                            <ul class="list-unstyled dropdownMenu">
                                <li>
                                    <a href="#"> LSNC Web</a>
                                </li>
                                <li>
                                    <a href="#"> Calfresh</a>
                                </li>
                                <li>
                                    <a href="#"> Regulations</a>
                                </li>
                                <li>
                                    <a href="#"> Cases</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#"> Pika <span class="sr-only"></span></a>                    
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#">Your JS Cases <span class="sr-only"></span></a>                    
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#">Events <span class="sr-only"></span></a>                   
                        </li>   
                        <li class="nav-item dd">
                            <a class="nav-link" href="logout.php">Logout <span class="sr-only"></span></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

    </header>

I an trying to fit in a dropdown menu with this navbar, all items are good except when I query items from my MySql table, results shift to far left, I want items to display underneath the Main dropdown menu (LSNC SPN). I tried all kind of combinations no luck. Every help is appreciated. Thank you.

CodePudding user response：

I saw your code and it seems to me you have done everything right except you didn't add "nav-item" class to the "dropdown-menu"'s parent "li" tag.