Why doesn't the dropdown menu work

Question

A simple navbar with a dropbtn. however the dropdown function never gets called for whatever reason.

https://code.sololearn.com/WtEdU65IHLr1/#html

Answer 1

The function is called and executed (to convince yourself, try to add a console.log('test'); in the function body), but your css declaration is not applied because '.show' selector and '.dropdown-content' selectors have the same weight priority (specificity), and you first define '.show' rules before '.dropdrown-content' rules, so second one overide first one ^^

You could fix it by moving '.show' css rules declaration after '.dropdown-content', or change '.show' selector by a much more weighted priority as : '.dropdown .show'...

Check this page about specificity of css selectors to learn more about it: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity