Controlling where a Drop Down menu Touchs a button-CodePudding

How can I make it so that this drop down menu touches the button in the top right hand side of the menu pop-up, rather the top left in its current form.

Code below which I have taken from a W3Schools example.

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  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;
  d isplay: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<div >
  <button >Dropdown</button>
  <div >
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

CodePudding user response：

Within: .dropdown-content {

add:

.dropdown-content {
...
top:0;
left:100%;
}

This will align it to the top right of the button.

CodePudding user response：

Using your example, this can be achieved by setting the right CSS property on the .dropdown-content class. Setting this property to 0 will cause the dropdown area to be aligned on the right side of the button.

I feel I should also note that because the button is on the left side of the page, the dropdown menu will be pushed outside of the page when aligning it to the right of the button. So idealy the button would be somewhere other than the left edge of the page.

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f1f1f1;
  min-width: 160px;
  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-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<div >
  <button >Dropdown</button>
  <div >
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>