在PHP导航栏中添加下拉菜单

Question

我想在导航栏中的一个菜单中添加一个下拉菜单，但似乎无法执行。我不知道将下拉代码放置在何处以使其起作用并附带CSS。

这是我的header.inc.php代码：

    <header class="flex-shrink-0 flex-grow-0">
    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-ewarz sticky-top h-100 p-0">
        <section class="container-fluid">
            <!-- Nav Brand Text -->
            <a class="navbar-brand d-none d-lg-block" style="font-size: 24pt; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none;" href="#">e<span style="color: #aa3232">W</span>arz</a>
        <!-- Burgermenu Toggler -->
        <button class="navbar-toggler ml-auto mr-2 collapsed" style="margin: 15px;" data-toggle="collapse" data-target="#navMenu" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse bg-ewarz" id="navMenu">
                <!-- Nav Links -->
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-server mr-2"></i>Servers</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-account-multiple mr-2"></i>Crew</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-cart mr-2"></i>Shop</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-text-box-outline mr-2"></i>General<i class="mdi mdi-menu-down"></i></a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-information-outline mr-2"></i>About<i class="mdi mdi-menu-down"></i></a>
                    </li>
                </ul>
            </div>
        <!-- Nav Icons -->
        <section class="d-none d-lg-block d-lg-inline-flex">
            <a href="#"><i class="icon mdi mdi-discord d-block mr-1"></i></a>
            <a href="#"><i class="icon mdi mdi-steam d-block ml-1"></i></a>
        </section>
        </section>
    </nav>
</header>

Answer 1

您可以在<ul><li>之后再次添加<ul><li>。

您可以将其用于下拉菜单；

  <ul class="navbar-nav mx-auto">
          <li class="nav-item mx-3">
              <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
              <ul class="navbar-nav mx-auto">
                  <li class="nav-item mx-3">
                     <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home2</a>
                  </li>
                  <li class="nav-item mx-3">
                     <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home3</a>
                  </li>
                  <li class="nav-item mx-3">
                     <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home4</a>
                  </li>
              </ul>
          </li>
  </ul>

Answer 2

Navbar中的下拉菜单应该以此方式定义。

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown Heading
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Dropdown Item 1</a>
      <a class="dropdown-item" href="#">Dropdown Item 2</a>
      <a class="dropdown-item" href="#">Dropdown Item 3</a>
    </div>
</li>

示例代码如下：

    <!-- Nav Links -->
    <ul class="navbar-nav mx-auto">
        <li class="nav-item mx-3">
            <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
        </li>
        <li class="nav-item mx-3">
            <a class="nav-link" href="#"><i class="mdi mdi-server mr-2"></i>Servers</a>
        </li>

        <!-- Add this block -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown Menu Text
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Dropdown Item 1</a>
                <a class="dropdown-item" href="#">Dropdown Item 2</a>
            </div>
        </li>
        <!-- Add this block -->
    </ul>

请参阅link以获取详细信息