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

Question

I am trying to make a drop down menu under a button in a navbar, but I can't get it to work quite right.

As you can see in the fiddle, I have a working navbar with the "settings" button (hammer + wrench), that shows the "dark theme" option.

Here's the problem: I can't think of a way to make the "dark theme" option to be under the "settings" button since its inside the navbar, and adding the floating button to the navbar would cause some ugly effects (eg border and background color would not fit anymore).

Link to the fiddle im talking about. Heres the HTML for the navbar and the button in question below:

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

And here is the CSS in question:

    .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: you might have to expand the window to show the settings button.

Answer 1

You should add position:relative; to your div .divLiRight and add right:0 to .dropContent,.dropContentShow

Answer 2

The .dropdown class use position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px . Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a "card". We also use z-index to place the dropdown in front of other elements.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

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