Question

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

正如你在小提琴中看到的那样，我有一个带有＆＃34;设置的工作导航栏＆＃34;按钮（锤子+扳手），显示＆＃34;黑暗主题＆＃34;选项。

问题在于：我无法想出一种方法来制作黑暗的主题＆＃34;选项属于＆＃34;设置＆＃34;按钮因为它在导航栏内部，并且将浮动按钮添加到导航栏会导致一些难看的效果（例如边框和背景颜色不再适合）。

Link to the fiddle我正在谈论。下面是导航栏的HTML和下面的问题按钮：

MailAddress.Address

这是有问题的CSS：

<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>

PS：您可能需要展开窗口才能显示设置按钮。

Answer 1

您应该将[{1}}添加到您的div [{1}}并添加position:relative; 到.divLiRight

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>

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

2 个答案: