试图用这个导航菜单适应插入符号

Question

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/bootstrap@5.0.2/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>

我试图将此导航栏放入下拉菜单中，所有项目都很好，除非我从 MySql table 查询项目时，结果移到最左边，我希望项目显示在主下拉菜单 (LSNC SPN) 下方。我尝试了各种组合，但没有成功。感谢您的帮助。谢谢。

Answer 1

我看到了你的代码，在我看来你做的一切都是正确的，只是你没有将“nav-item”class 添加到“dropdown-menu”的父“li”标签。

试图用这个导航菜单适应插入符号

Trying to fit in Caret with this nav menu

html

css

bootstrap-4