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

像这样删除 .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>

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

1 个答案: