Explaining CSS Specificity Rules

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 had a display: flex; declaration using the .navbar ul selector. The dropdown was a with a class of .dropd