Dropdown Content

Question

Hey everyone,
As I was practicing my CSS in creating a dropdown menu, I noticed that the extra content won't show after I hover over the lists. Now, this was supposed to be a piece of cake, I know how a dropdown is done in general. Apparently, I might have made a (very)little mistake or I might have missed something tiny because I can't see what am I doing wrong. Please, help.
https://code.sololearn.com/Waym8ny5DXyA/?ref=app

Answer 1

You cant set display:block from .one:hover, .two:hover, .three:hover,
there is no area reserved for .one, .two and . three to hover initially.

Use li:hover to turn on .one, .two and .three instead.

li:hover .one,
li:hover .two,
li:hover .three{
display: block;
}

Answer 2

Thank you for your help. I never thought about it like that. When I placed the classes one, two, three to display:none, with the way I wrote the code, it worked. I thought it would work the same way with the hover part of the code. I guess, I was wrong.