How to adjust width of drop down menu button?

Question

I am building a dropdown menu for my navigation bar. The styling of the dropdown menu looks the way I want it. However, I have a problem with the spacing of the dropdown button. Basically, the button is embedded in a div that has a width of 160, which is basically the width of the open dropdown menu. However, I want the div to only have the width of the button itself, not of the expanding dropdown menu. Otherwise, the dropdown menu with its big div will shift the other elements of navbar.

 .button-container { position: relative; /*text-align: center;*/ padding: 0; overflow:hidden; display:flex; /*Code Added */ justify-content:flex-end; margin-left:auto; /*float: center;*/ width:160px; }.button-container img{width:50px; height:50px; display:block; border-radius:50%} /* Code changed */ /* The container <div> - needed to position the dropdown content */.dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */.dropdown-content { display: none; position: absolute; background-color: white; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */.dropdown-content a { font-weight: 600; /*Semi-Bold = 600*/ /*Bold = 700*/ font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color:#666666; padding: 12px 16px; text-decoration: none; display: block; right: 4px; left: auto; } /* Change color of dropdown links on hover */.dropdown-content a:hover { color:#F16852;} /* Show the dropdown menu on hover */.dropdown:hover.dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */.dropdown:hover.dropbtn { background-color: #3e8e41; }

 <div class="dropdown"> <div class="button-container"> <img src="http://www.fillmurray.com/g/300/300"/> </div> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div>

Thanks a lot. I am happy for any clarification.

Answer 1

Try removing the width: 160px; for.button-container and setting right: 0; on.dropdown-content.

You don't want the.button-container to be as wide as the.dropdown-content, but you have set it to the same width!

You have positioned the.dropdown-content absolutely, but not given any further specification. Saying right: 0, means it should be aligned to the right of the closest parent element with relative positioning (in this case your.dropdown element).