When making a singular button I was able to make a dropdown menu the width of the button, but doing the same thing for multiple buttons to make a nav bar has been a struggle.
Clearly I have some fundamental misunderstanding or lack of knowledge about element widths but no matter how much I tinker with values or google I can't seem to figure out what it is. Even explicitly setting width values to 100px makes the dropdown content the right width, but then become too long for some reason when hovering.
The code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</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>First I tried setting width to 100% for dropdown-content because I thought that would make it take up the full width of its container (dropdown) which I assumed to be only the width it needed to contain the button but this was clearly wrong. The links extended all the way to the end of the page.
Next, I tried setting the dropdown class to inline block with negative margins and this made it to where the links just didn't even pop up when I hovered over them.
Lastly, I tried explicitly setting all the widths to 100px. This worked for making the dropdown content's width what I wanted it to be, but it got wider for some reason when I hovered over it? I've also tried implementing the answer here, but it didn't display the links again for some reason
So, what am I missing? How do I make the button only take up the space it needs while having the dropdown content below that button take that same width? Thanks in advance for any help.
Make your dropdown width same as link width e.g. it's creating link of width: 118.51px in your case.
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 118.51px;
box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
z-index: 1;
}