我无法制作干净的下拉菜单

Question

我正在调整别人的代码，html不是我的事。由于某种原因，该代码使下拉菜单更改，有时分为两部分。我宁愿有一个直接可以直接使用且不会改变的下拉菜单。希望有人能告诉我为什么它以这种方式起作用。

下面是代码，其中包括前后图像

谢谢

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href=""></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href=“/index.html” id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="index.html">Home</a>
<a class="dropdown-item" href="sales.html">Sales</a>
<a class="dropdown-item" href="/management">Management</a>
<a class="dropdown-item" href="/bartending">Bartending</a>
<a class="dropdown-item" href="/print">My Name In Print</a>
<a class="dropdown-item" href="/guerillamarketing">Guerilla Marketing</a>
</div>
</li>
</ul>
</div>

Answer 1

通常（但并非总是），下拉列表是li内部的嵌套列表，该列表由这样的按钮控制

<ul>
  <li><a href="reg.html">regular link</a></li>
  <li>
    <button>drop down</button>
    <ul>
      <li><a href="dropdown.html">drop down link 1</a></li>
      <li><a href="dropdown2.html">drop down link 2</a></li>
    </ul>
  </li>
</ul>

所以您的最终可能看起来像这样：

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href=""></a>
    </li>
    <li class="nav-item dropdown">
      <button>menu</button>
      <ul>
        <li><a class="dropdown-item" href="index.html">Home</a></li>
        <li><a class="dropdown-item" href="sales.html">Sales</a></li>
        <li><a class="dropdown-item" href="/management">Management</a></li>
        <li><a class="dropdown-item" href="/bartending">Bartending</a></li>
        <li><a class="dropdown-item" href="/print">My Name In Print</a></li>
        <li><a class="dropdown-item" href="/guerillamarketing">Guerilla Marketing</a</li>
      </ul>
    </li>
  </ul>
</div>

病假还包括我创建的一个下拉菜单示例，该菜单项是为了帮助您使用那些咏叹调属性而创建的，该菜单项由于缺少样式而提前对不起。希望这会有所帮助。

<header id="sitewide-header">
    <ul id="visible-navigation">
      <li id="logo-container"><a href="#">vertical template</a></li>
      <li id="control-container"><button id="menu-button" aria-expanded="false" aria-controls="toggled-navigation">menu</button></li>
    </ul>
    <nav id="navigation-container">
      <ul id="toggled-navigation" aria-hidden="true" aria-labelledby="menu-button">
        <li><a href="#">home section</a></li>
        <li><a href="#">section two</a></li>
        <li>
          <button id="dropdown1-button" aria-expanded="false" aria-controls="dropdown-one">three &ndash; five</button>
          <ul id="dropdown-one" aria-hidden="true" aria-labelledby="dropdown1-button">
            <li><a href="#">section three</a></li>
            <li><a href="#">section four</a></li>
            <li><a href="#">section five</a></li>
          </ul>
        </li>
        <li><a href="#">section six</a></li>
      </ul>
    </nav>
  </header>