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