While working on my recent article, I had a dropdown set to display: block; only when the user hovers over it. The problem is that the dropdown still shows regardless. It was not removed from the viewport despite having display: none; applied. I inspected the dropdown in the browser’s dev tools and found display: none; — it was struck through. Upon further inspection, I discovered the parent <nav> had a display: flex; declaration using the .navbar ul selector. The dropdown was a <ul> with a class of .dropdown-menu set to display: none , but the style had no effect. Alas! .navbar ul used both a class and an element selector, giving it a specificity of 0, 0, 1, 1 , compared to .dropdown-menu with a specificity of 0, 0, 1, 0 .

CSS, which stands for Cascading Style Sheets, is a rulebook that defines the styles of a markup language, such as HTML and XML. The “cascading” in the name refers to the set of rules the browser follows to resolve naming conflicts.…