CSS 下拉菜单无法正确隐藏/显示

Question

I tried searching and finding out how to make a dropdown menu and they all say to use display: none then when hover display block which makes sense but I can't seem to make it work in my code, what I want is to be able to hover my span element and be able to have a dropdown menu come form it.

 .dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; z-index: 1; width: 10rem; overflow: auto; }.dropdown:hover, .dropdown-content { display: block; }

 <div class="user-nav__user"> <img src="img/user.jpg" alt="User photo" class="user-nav__user-photo" /> <div class="dropdown"> <span class="user-nav__user-name">Jonas</span> <div class="dropdown-content"> <a href="#">Test 1</a> <a href="#">Test 2</a> <a href="#">Test 3</a> </div> </div> </div>

Answer 1

Remove the comma between.dropdown:hover and.dropdown-content in the css like this:

 .dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; z-index: 1; width: 10rem; overflow: auto; }.dropdown:hover.dropdown-content { display: block; }

 <div class="user-nav__user"> <img src="img/user.jpg" alt="User photo" class="user-nav__user-photo" /> <div class="dropdown"> <span class="user-nav__user-name">Jonas</span> <div class="dropdown-content"> <a href="#">Test 1</a> <a href="#">Test 2</a> <a href="#">Test 3</a> </div> </div> </div>