After solving the issue with my dropdown menu that used to shift all other buttons when hovered over, I stumbled upon a new problem. Now, when the page is scrolled down slightly and a button is hovered over, the dropdown appears in its original position instead of below the button as expected. Here is the code snippet causing this behavior:
.tut_navi_buttons .drop_down_navi_content {
display: none;
right: 0;
position: unset;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
height: 0px;
transition: height 1s ease;
}
.tut_navi_buttons:hover .drop_down_navi_content {
position: fixed;
display: block;
height: auto;
}
#tut_navi {
overflow: hidden;
padding-top: 10px;
float: left;
padding-left: 5px;
}
.tut_navi_buttons .drop_down_navi {
overflow: hidden;
border: none;
outline: none;
color: black;
background-color: inherit;
}
.tut_navi_buttons {
width: auto;
height: 20px;
margin: 10px;
position: relative;
display: inline-block;
}<div id='tut_navi'>
<div class="tut_navi_buttons">
<button class="drop_down_navi">Python Basics <i class="fa fa-angle-down"></i></button>
<div class="drop_down_navi_content">
<a href="tutorial1.html">Beginner</a>
<a href="#">Pre-intermediate</a>
<a href="#">Intermediate</a>
</div>
</div>Please take a look at the attached images for clearer understanding.