May I know why hovering doesn't work on line no 39 at present and only works if I change it to .dropdown:hover .dropdown-content { ?
Since there are two classes overlapped on each other, can i not access the child class without going through the parent class ?
a.dropbtn:hover .dropdown-content reads as "a.dropbtn:hover is an ancestor to .dropdown-content" - now take a look at your HTML.
Hint: Adjacent sibling selectors | MDN.