javascript - <ul> 导航栏中的 JS/CSS 下拉菜单

Question

我试图在导航栏中的按钮下创建一个下拉菜单，但我无法使其正常工作。

正如您在 fiddle 中看到的那样，我有一个带有“设置”按钮(锤子 + Spanner )的工作导航栏，它显示了“深色主题”选项。

这就是问题所在:我想不出一种方法让“深色主题”选项位于“设置”按钮下方，因为它位于导航栏内，并且将 float 按钮添加到导航栏会导致一些丑陋的效果(例如，边框和背景颜色将不再合适)。

Link to the fiddle我在说。 下面是导航栏和相关按钮的 HTML:

<ul class="navBar">
  <div class="divLiLeft">
    <li>
      <a>
        <button class="navButton">Button 1</button>
      </a>
    </li>
  </div>
  <div class="divLiLeft">
    <li>
      <a>
        <button class="navButton">Button 2</button>
      </a>
    </li>
  </div>
  <div class="divLiLeft">
    <li>
      <a>
        <button class="navButton">Button 3</button>
      </a>
    </li>
  </div>
  <div>
    <div class="divLiRight">
      <li>
        <button id="dropButton" class="dropButton"></button>
      </li>
    </div>
  </div>
</ul>
<div id="dropContent" class="dropContent">
  <button id="change" class="navButton"></button>
</div>

这里是有问题的 CSS:

    .navBar,.navBarNew {
      list-style-type: none;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      padding: 0;
      margin: 0px;
      border-bottom: solid 1px #3E3D3D;
      width: 100%;
      background-color: #747474;
      transition-duration: 0.4s;
      min-width: 100px;
    }
    .divLiLeft {
      display: inline-block;
      float: left;
    }

.divLiRight {
  display: inline-block;
  float: right;
}

PS:您可能需要展开窗 Eloquent 能显示设置按钮。

Answer 1

您应该将 position:relative; 添加到您的 div .divLiRight 并添加 right:0 到 .dropContent,.dropContentShow