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

Question

我试着搜索并找出如何制作一个下拉菜单，他们都说使用display: none然后当悬停显示块这是有意义的，但我似乎不能使它在我的代码中工作，我想要的是能够悬停我的span元素，并能够有一个下拉菜单来自它。

.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

删除css中。dropdown:hover和。dropdown-content之间的逗号，如下所示:

.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>