Dropdown menu is dropping too low - html

Question

Recently I fixed my dropdown menu which used to drop with all the other un-hovered buttons also changing their positions. The current issue I just noticed accidentally. When the page is all scrolled up, i.e. I am at starting position, dropdown works as expected. But if I scroll a little bit down, and then hover over button, the dropdown appears where it was before but I am expecting it to appear below the button. This is the snap of code I am using:
.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;
/*height: auto;*/
/*box-shadow: 0px 2px 1px grey;*/
}
#tut_navi {
overflow: hidden;
padding-top: 10px;
float: left;
padding-left: 5px;
/*display: inline-block;*/
}
.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;
/*margin-bottom: 20px;*/
/*padding: 5px;*/
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">
Beginner
Pre-intermediate
Intermediate
</div>
</div>
Please refer to the images I am attaching as they will make it clear.
After scrolling a bit
While at top of page

Answer 1

Remove position:unset; replace with position:relative;
Separate the first two classes in the style sheet because it seems to be clashing