我有一個CSS復選框下拉框的問題。請檢查代碼。

input[name="navbar-toggler"],
.navbar-menu,
input[name="dropdown"],
.products {
  display: none;
}

input[name="navbar-toggler"]:checked~.navbar-menu {
  display: block;
}

input[name="dropdown"]:checked~.products {
  display: block;
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container px-4 px-lg-5">
    <a class="navbar-brand" href="#">Brand</a>
    <input id="check1" type="checkbox" name="navbar-toggler" />
    <label for="check1" class="navbar-toggler"><span class="navbar-toggler-icon"></label>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">

        <li class="nav-item"><a class="nav-link" aria-current="page" href="/">Home</a></li>
        <li class="nav-item">
          <input id="check2" type="checkbox" name="dropdown" />
          <label for="check2" class="nav-link">Products</label>
          <ul class="products">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="navbar-menu mb-4">
  <div class="container">
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
  </div>
</div>

您有一個未關閉的& ltspan & gt在check1的標簽所在的行上。在結束標簽標記之前關閉它，看看它是否如預期的那樣工作。