JS / CSS下拉列表中的 <ul> 导航栏

Question

我正在尝试在导航栏中的按钮下方创建一个下拉菜单，但无法使其正常运行。

如您在小提琴中看到的，我有一个带有“设置”按钮（锤子+扳手）的导航栏，其中显示了“深色主题”选项。

这是问题所在：我想不出一种方法，因为它在导航栏中位于“设置”按钮下方，因此无法将“黑暗主题”选项置于“设置”按钮之下，并且将导航按钮添加到导航栏中会产生一些难看的效果（例如边框）和背景颜色不再适合）。

链接到我正在谈论的小提琴。 以下是导航栏和所关注按钮的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：您可能需要扩展窗口才能显示设置按钮。

Answer 1

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

Answer 2

.dropdown类使用position:relative ，当我们希望将下拉内容放置在下拉按钮的正下方（使用position:absolute ）时，需要使用该类。

.dropdown-content类保存实际的下拉菜单。 默认情况下它是隐藏的，并且将在悬停时显示（请参阅下文）。 请注意， min-width设置为160px 。 随时更改此设置。 提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为100％（然后使用overflow:auto启用在小屏幕上滚动）。

我们没有使用边框，而是使用box-shadow属性使下拉菜单看起来像“卡片”。 我们还使用z-index将下拉列表放置在其他元素的前面。

当用户将鼠标移到下拉按钮上时， :hover选择器用于显示下拉菜单。

引用自https://www.w3schools.com/howto/howto_css_dropdown.asp

 .body, .bodyNew { background-color: #EEEEEE; padding-top: 40px; transition-duration: 0.4s; width:100%; height:100%; overflow: hidden; } .bodyNew { background-color: #202225; } .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: 500px; } .navBarNew { border-bottom: solid 1px #44474C; width: 100%; background-color: #101217; } .divLiLeft { display: inline-block; float: left; } .divLiRight { display: inline-block; float: right; } .navButton, .navButtonNew { padding: 5px; font-size: 25px; background-color: #747474; color: #CCCCCC; border-right: solid 1px #3E3D3D; border-top: none; border-left: none; border-bottom: none; transition-duration: 0.4s; cursor: pointer; } .navButton:hover { background-color: #CCCCCC; color: #747474; } .navButton::-moz-focus-inner { border: none; } .navButtonNew { background-color: #101217; color: #44474C; border-right: solid 1px #44474C; } .navButtonNew:hover { background-color: #63666E; color: #0C1018; } .navButtonNew::-moz-focus-inner { border: none; } .dropdown { top: -48px; position: relative; display: inline-block; right:9px; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 140px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #CCCCCC; color: #747474; } .dropbtn{ border-left:solid 1px #3E3D3D; }

 <!DOCTYPE html> <html> <head> </head> <body class="body"> <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> </ul> <div class="divLiRight"> <div class="dropdown"> <button class="dropbtn navButton">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> </body> </html>

JS / CSS下拉列表中的 <ul> 导航栏

问题描述

2 个解决方案

解决方案1
1 2017-08-03 21:34:45

解决方案2
0 已采纳 2017-08-03 22:36:41

JS / CSS下拉列表中的 <ul> 导航栏

问题描述

2 个解决方案

解决方案1 1 2017-08-03 21:34:45

解决方案2 0 已采纳 2017-08-03 22:36:41

解决方案1
1 2017-08-03 21:34:45

解决方案2
0 已采纳 2017-08-03 22:36:41