How to align the dropdown menu with the button-CodePudding

I have a dropdown menu with html, css and some js. It works fine, I also added some animations to it. Now I would like to align it right under the click me button! I have been looking around on the stack and tried with float and align but I can't. Sorry but I'm new to this, can anyone help me ?

I appreciate any response, thanks.

function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className  = " w3-show";
  } else { 
    x.className  = " w3-hide";
    setTimeout(function(){
    x.className = x.className.replace(" w3-show", "");
      x.className = x.className.replace(" w3-hide", "");
      
    },500)
  }
}

/*Items menu*/
.user_menu_item {
    display: flex;
    align-items: center;
}

.user_menu_item:hover {
    background: whitesmoke;
    border-left: 4px solid blue;
    transition: 0.3s;
}

.user_menu_item:not(:hover) {
    transition: 0.3s;
}

.user_menu_item > a {
    display: flex;
    align-items: center;
    padding: 12px 10px 12px 10px;
    width: 100%;
    font-size: 14px;
    color: #75777D;
}

.w3-container {
    position: absolute;
    top: 15%;
}

.w3-dropdown-click {
    display: flex;
    position: relative;
}

.w3-dropdown-content {
  display: none;
  background-color: whitesmoke;
  min-width: 160px;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  position:relative;
  
  animation:animateFromBottom 0.6s
}

@keyframes animateFromBottom {
    from{bottom:-50px;opacity:0} to{bottom:0;opacity:1}
}

@keyframes animateToBottom {
  from{bottom:0;opacity:1} to{bottom:-50px;opacity:0}
}

.w3-bar-block .w3-bar-item {
    width:100%;
    display:block;
    padding:8px 16px;
    text-align:left;
    border:none;
    white-space:normal;
    float:none;
    outline:0
}

.w3-show-block,.w3-show {
    display:block!important
}

.w3-dropdown-content.w3-hide {
  animation:animateToBottom 0.6s
}

.w3-button {
  float: right;
}

<button onclick="myFunction()" >Click Me!</button> 

<div >
  <div >
   
      
   <div id="Demo" >
    <div >
        <a href="/account">
         <span >Dashboard</span>
        </a>
    </div>
    
     <div >
        <a href="ordini">
         <span >I miei ordini</span>
        </a>
    </div>
    
    <div >
        <a href="libreria">
         <span >Downloads</span>
        </a>
    </div>
    
    <div >
        <a href="impostazioni">
         <span >Impostazioni</span>
        </a>
    </div>
    
    <div >
        <a href="wp-login.php?action=logout">
         <span >Logout</span>
        </a>
    </div>
   </div>

  </div>
</div>

CodePudding user response：

You can create a container div to put both the menu and the button themselves into and then give that container absolute positioning properties like you're doing with your menu. You'll have to adjust your menu position so when it appears it's not overlapping the button but I took care of that in the code. Also, you'll need to modify the position on the menu itself if you want the button and the menu to be on the absolute right and not offset and overflowing the right side of the screen.

See: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position

function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className  = " w3-show";
  } else {
    x.className  = " w3-hide";
    setTimeout(function() {
      x.className = x.className.replace(" w3-show", "");
      x.className = x.className.replace(" w3-hide", "");

    }, 500)
  }
}

.container {
  display: block;
  margin: 0 0;
  position: absolute;
  top: 10px;
  right: 0px;
}

/*Items menu*/
.user_menu_item {
  display: flex;
  align-items: center;
}

.user_menu_item:hover {
  background: whitesmoke;
  border-left: 4px solid blue;
  transition: 0.3s;
}

.user_menu_item:not(:hover) {
  transition: 0.3s;
}

.user_menu_item>a {
  display: flex;
  align-items: center;
  padding: 12px 10px 12px 10px;
  width: 100%;
  font-size: 14px;
  color: #75777D;
}

.w3-container {
  position: absolute;
  top: 25px;
  right: 0px;
}

.w3-dropdown-click {
  display: flex;
  position: relative;
}

.w3-dropdown-content {
  display: none;
  background-color: whitesmoke;
  min-width: 160px;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  position: relative;

  animation: animateFromBottom 0.6s
}

@keyframes animateFromBottom {
  from {
    bottom: -50px;
    opacity: 0
  }

  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes animateToBottom {
  from {
    bottom: 0;
    opacity: 1
  }

  to {
    bottom: -50px;
    opacity: 0
  }
}

.w3-bar-block .w3-bar-item {
  width: 100%;
  display: block;
  padding: 8px 16px;
  text-align: left;
  border: none;
  white-space: normal;
  float: none;
  outline: 0;
}

.w3-show-block,
.w3-show {
  display: block !important
}

.w3-dropdown-content.w3-hide {
  animation: animateToBottom 0.6s
}

.w3-button {
  display: block;
}

<div >
  <button onclick="myFunction()" >Click Me!</button>

  <div >
    <div >


      <div id="Demo" >
        <div >
          <a href="/account">
            <span >Dashboard</span>
          </a>
        </div>

        <div >
          <a href="ordini">
            <span >I miei ordini</span>
          </a>
        </div>

        <div >
          <a href="libreria">
            <span >Downloads</span>
          </a>
        </div>

        <div >
          <a href="impostazioni">
            <span >Impostazioni</span>
          </a>
        </div>

        <div >
          <a href="wp-login.php?action=logout">
            <span >Logout</span>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

CodePudding user response：

Add popup and button to the same parent element and set its position relative and then set top value of popup value to static value(height of btn)

function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className  = " w3-show";
  } else {
    x.className  = " w3-hide";
    setTimeout(function() {
      x.className = x.className.replace(" w3-show", "");
      x.className = x.className.replace(" w3-hide", "");
    }, 500);
  }
}

.main_container {
  position: relative;
}


/*Items menu*/

.user_menu_item {
  display: flex;
  align-items: center;
}

.user_menu_item:hover {
  background: whitesmoke;
  border-left: 4px solid blue;
  transition: 0.3s;
}

.user_menu_item:not(:hover) {
  transition: 0.3s;
}

.user_menu_item>a {
  display: flex;
  align-items: center;
  padding: 12px 10px 12px 10px;
  width: 100%;
  font-size: 14px;
  color: #75777d;
}

.w3-container {
  position: absolute;
  right: 0;
  top: 25px;
}

.w3-dropdown-click {
  display: flex;
  position: relative;
}

.w3-dropdown-content {
  display: none;
  background-color: whitesmoke;
  min-width: 160px;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  position: relative;
  animation: animateFromBottom 0.6s;
}

@keyframes animateFromBottom {
  from {
    bottom: -50px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes animateToBottom {
  from {
    bottom: 0;
    opacity: 1;
  }
  to {
    bottom: -50px;
    opacity: 0;
  }
}

.w3-bar-block .w3-bar-item {
  width: 100%;
  display: block;
  padding: 8px 16px;
  text-align: left;
  border: none;
  white-space: normal;
  float: none;
  outline: 0;
}

.w3-show-block,
.w3-show {
  display: block !important;
}

.w3-dropdown-content.w3-hide {
  animation: animateToBottom 0.6s;
}

.w3-button {
  float: right;
}

<div >
  <button onclick="myFunction()" >Click Me!</button>

  <div >
    <div >

      <div id="Demo" >
        <div >
          <a href="/account">
            <span >Dashboard</span>
          </a>
        </div>

        <div >
          <a href="ordini">
            <span >I miei ordini</span>
          </a>
        </div>

        <div >
          <a href="libreria">
            <span >Downloads</span>
          </a>
        </div>

        <div >
          <a href="impostazioni">
            <span >Impostazioni</span>
          </a>
        </div>

        <div >
          <a href="wp-login.php?action=logout">
            <span >Logout</span>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>