I am working on a navigation bar that has a dropdown menu which appears on hover. I want the size of the dropdown menu items to match the size of the parent element.
Here is an image for reference:
https://i.stack.imgur.com/oNGmZ.png
Currently, the "One" & "Two" elements in the dropdown menu are slightly larger than the parent element "This is a dropdown." When resizing the window, the parent element changes size and I would like the "One" & "Two" elements to resize accordingly to maintain consistency in width.
Code
The structure of my navbar includes various elements laid out as follows:
<div class="container-fluid nopadding navbar"> <!-- NAVBAR -->
<div class="row">
<div class="container-fluid col-xs-12 col-sm-12 col-md-10"> <!-- MENU -->
<div class="row">
<div class="dropdown col-xs-12 col-sm-2">
<div class="container-fluid">
<div class="row">
<button class="dropbtn col-xs-12">This is a dropdown</button>
<div class="dropdown-content col-xs-12 nopadding">
<a href="#">One</a>
<a href="#">Two</a>
</div>
</div>
</div>
</div>
...more navbar elements follow here
</div>
</div>
</div>
</div>
Below is some of the CSS code used for styling:
/* Dropdown Button */
.dropbtn {
background-color: #F6F8FB;
border: none;
cursor: pointer;
font-family: AlegreyaSansSC-Light;
font-size: 16px;
color: #637F92;
letter-spacing: 0.52px;
height: 81px;
}
/* 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: #F6F8FB;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
background: rgba(221, 232, 241, 0.95);
}
/* Links inside the dropdown */
.dropdown-content a {
padding: 30px;
text-align: center;
text-decoration: none;
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
top: 81px;
position: absolute;
}
I have provided extra details just to ensure clarity in understanding the issue at hand.