如何将下拉菜单与按钮对齐

Question

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()" class="w3-button">Click Me!</button> <div class="w3-container"> <div class="w3-dropdown-click"> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <div class="user_menu_item"> <a href="/account"> <span class="link_text">Dashboard</span> </a> </div> <div class="user_menu_item"> <a href="ordini"> <span class="link_text">I miei ordini</span> </a> </div> <div class="user_menu_item"> <a href="libreria"> <span class="link_text">Downloads</span> </a> </div> <div class="user_menu_item"> <a href="impostazioni"> <span class="link_text">Impostazioni</span> </a> </div> <div class="user_menu_item"> <a href="wp-login.php?action=logout"> <span class="link_text">Logout</span> </a> </div> </div> </div> </div>

Answer 1

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 class="container"> <button onclick="myFunction()" class="w3-button">Click Me!</button> <div class="w3-container"> <div class="w3-dropdown-click"> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <div class="user_menu_item"> <a href="/account"> <span class="link_text">Dashboard</span> </a> </div> <div class="user_menu_item"> <a href="ordini"> <span class="link_text">I miei ordini</span> </a> </div> <div class="user_menu_item"> <a href="libreria"> <span class="link_text">Downloads</span> </a> </div> <div class="user_menu_item"> <a href="impostazioni"> <span class="link_text">Impostazioni</span> </a> </div> <div class="user_menu_item"> <a href="wp-login.php?action=logout"> <span class="link_text">Logout</span> </a> </div> </div> </div> </div> </div>

Answer 2

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 class="main_container"> <button onclick="myFunction()" class="w3-button">Click Me!</button> <div class="w3-container"> <div class="w3-dropdown-click"> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <div class="user_menu_item"> <a href="/account"> <span class="link_text">Dashboard</span> </a> </div> <div class="user_menu_item"> <a href="ordini"> <span class="link_text">I miei ordini</span> </a> </div> <div class="user_menu_item"> <a href="libreria"> <span class="link_text">Downloads</span> </a> </div> <div class="user_menu_item"> <a href="impostazioni"> <span class="link_text">Impostazioni</span> </a> </div> <div class="user_menu_item"> <a href="wp-login.php?action=logout"> <span class="link_text">Logout</span> </a> </div> </div> </div> </div> </div>