I've been struggling to implement a drop-down feature in my menu. The issue is that when I use display: flex, hovering over the drop-down also expands all other boxes without drop-downs. Any ideas on how to fix this easily?
Additionally, is there a way to ensure that the drop-down boxes align with the main header itself? Here's the code pen for reference:
CSS:
.square-link
{
z-index: 80;
text-align: center;
display: flex;
flex-wrap: wrap;
position: relative;
}
.square-link a
{
border: 2px solid #373737;
border-radius: 5px 5px 5px 5px !important;
color: #373737;
background-color: transparent;
font-size: calc(7px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
text-align: center;
padding: 6px;
padding-right: 2vw;
padding-left: 2vw;
margin-right: 1vw;
margin-bottom: 3%;
}
.square-link a:hover, .square-link a.active
{
background-color: #373737;
color: #ffffff;
transition: 0.2s
}
.dropbtn {
border: 2px solid #373737;
border-radius: 5px 5px 5px 5px !important;
color: #373737;
background-color: transparent;
font-size: calc(7px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
text-align: center;
padding: 6px;
padding-right: 2vw;
padding-left: 2vw;
margin-right: 1vw;
margin-bottom: 3%;
cursor: pointer;
overflow: hidden;
transition: 0.2s;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 75 !important;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
z-index: 100 !important;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
z-index: 75 !important;
border: none;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: white;
background-color: #373737;
transition: 0.2s;
}
.caret-down
{
color: #373737;
}
HTML:
<link rel="stylesheet" href="//libapps-custom.library.curtin.edu.au/css/fontawesome.min.css?ver=5.8.11">
<div class="contentbox">
<div class="square-link">
<a href="">Header One</a>
<div class="dropdown">
<button class="dropbtn">Header Two<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
</div>
<a href="">Header Three</a>
<a href="">Header Four</a>
<a href="">Header Five</a>
</div>
</div>