Question

我的项目有一个奇怪的问题，我试图创建下拉菜单，我甚至使用了3 w学校的一个简单示例，但它不起作用，这是我的代码：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="dropdown">
  <span className="span1">Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

我看到了诸如.dropdown:hover +.dropdown-content之类的解决方案，但它也无法正常工作。

Answer 1

这适用于＆只能悬停在文本上，因为您的 .dropdown 没有填充。在此示例中，我添加了填充并按下了您在绝对位置上打开的菜单。

现在，当悬停周围的空间时，将触发下拉菜单。我还向CSS触发器中添加了：focus-within标记，这使用户可以先进入父菜单，然后进入打开菜单。

.dropdown {
  background-color:orange;
  padding: 20px;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  top:60px;
  left:0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content 
{
  display: block;
}

<div class="dropdown">
  <span className="span1">Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

显示下拉菜单不起作用的CSS

1 个答案: