Can somebody explain this HTML dropdown menu code - html

Question

I need help explaning this dropdown menu code. I know what the code does bit i have a hard time explaining what does what.
.dropbtn {
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
left: 77.005px;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: lightgrey;
min-width: 200px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: grey;
}
<div class="dropdown">
<button class="dropbtn">meny</button>
<div class="dropdown-content">
A la carte matsedel
veckomatsedel
</div>
</div>

Answer 1

The first file is a .css file and changes your html's file style (the second one). The .css file changes:
1) the dropbtn meny (it remains fixed, it's the black menu part)
2) the dropdown class (how the all dropping down content will look; it's the whole thing)
3) the dropdown-content (how the dropped down elements will look; it's the grey part (a la carte ... & vecko ...)
4) the dropdown-content a (how the text in the grey area looks)
5) dropdown-content a:hover (when you are hover one of the grey elements, a la carte ... or vecko ..., it will appear "selected" aka white)
6) dropdown:hover .dropdown-content (if you are on the black meny it changes color)
I'm still studying this too, I hope it's usefull for you.