使用按钮的下拉菜单，将鼠标悬停在一个按钮上会显示所有按钮的块

Question

我正在尝试创建一个菜单，其中水平有 3 个按钮，当将鼠标悬停在每个按钮上时，它应该显示列出该按钮下各种子菜单选项的块。下面的代码面临的唯一问题是：

1. 当我将鼠标悬停在行中的最后一个按钮上时，它会显示“所有三个”按钮中的下拉子菜单选项。
2. 当我将鼠标悬停在第一个按钮上时，它仅正确显示该按钮的子菜单，当我将鼠标悬停到行中的第二个按钮时，为第一个按钮显示的子菜单不会自行关闭（而是现在两个按钮都显示子菜单下拉菜单已展开）。

这是我的简单代码：

<style type="text/css"> 
.dropbtn-01 {
    background-color: transparent;
    color: yellow;
    padding: 3px;
    font-size: 12px;
}
.dropdown-01 {
    display: inline-block;
    position: relative
}
.dropdown-content-01 {
    position: absolute;
    background-color: lightgrey;
    min-width: 10px;
    display: none;
    z-index: 1;
}
.dropdown-content-01 a {
    color: black;
    padding: 6px 8px;
    text-decoration: none;
    display: block;
}
.dropdown-content-01 a:hover {
    background-color: orange;
}
.dropdown-01:hover .dropdown-content-01 {
    display: block;
}
.dropdown-01:hover .dropbtn-01 {
    background-color: grey;
}
.dropbtn-02 {
    background-color: transparent;
    color: yellow;
    padding: 4px;
    font-size: 10px;
}
.dropdown-02 {
    display: inline-block;
    position: relative
}
.dropdown-content-02 {
    position: absolute;
    background-color: lightgrey;
    min-width: 30px;
    display: none;
    z-index: 2;
}
.dropdown-content-02 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content-02 a:hover {
    background-color: orange;
}
.dropdown-02:hover .dropdown-content-02 {
    display: block;
}
.dropdown-02:hover .dropbtn-02 {
    background-color: grey;
}

.dropbtn-03 {
    background-color: transparent;
    color: yellow;
    padding: 7px;
    font-size: 12px;
}
.dropdown-03 {
    display: inline-block;
    position: relative
}
.dropdown-content-03 {
    position: absolute;
    background-color: lightgrey;
    min-width: 30px;
    display: none;
    z-index: 3;
}
.dropdown-content-03 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content-03 a:hover {
    background-color: orange;
}
.dropdown-03:hover .dropdown-content-03 {
    display: block;
}
.dropdown-03:hover .dropbtn-03 {
    background-color: grey;
}
</style>

<div class="dropdown-01"><span><button class="dropbtn-01">Main</button> </span>
<div class="dropdown-content-01"><span><a href="Link-1">Home</a> <a href="Link-2">The Mama</a> &lt; </span></div>

<span style="display:inline-block; width: 60px;"></span>
<div class="dropdown-02"><span><button class="dropbtn-02">About</button> </span>
<div class="dropdown-content-02"><span><a href="Link-3">Credentials</a> <a href="Link-4">Aboutx</a> &lt; </span></div>


<span style="display:inline-block; width: 60px;"></span>
<div class="dropdown-03"><span><button class="dropbtn-03">Contact</button> </span>
<div class="dropdown-content-03"><span><a href="Link-5">Contact Us</a> &lt; </span></div>

Answer 1

您的某些 div 容器没有结束标签。例如，您没有使用 dropdown-01 类关闭第一个 div 容器。我已经清理了您的代码并删除了不必要的标签。请参阅下面的片段：

.wrapper {
  display: flex;
  justify-content: space-around;
}

.dropbtn-01 {
  background-color: transparent;
  color: yellow;
  padding: 3px;
  font-size: 12px;
}

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

.dropdown-content-01 {
  position: absolute;
  background-color: lightgrey;
  min-width: 10px;
  display: none;
  z-index: 1;
}

.dropdown-content-01 a {
  color: black;
  padding: 6px 8px;
  text-decoration: none;
  display: block;
}

.dropdown-content-01 a:hover {
  background-color: orange;
}

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

.dropdown-01:hover .dropbtn-01 {
  background-color: grey;
}

.dropbtn-02 {
  background-color: transparent;
  color: yellow;
  padding: 4px;
  font-size: 10px;
}

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

.dropdown-content-02 {
  position: absolute;
  background-color: lightgrey;
  min-width: 30px;
  display: none;
  z-index: 2;
}

.dropdown-content-02 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content-02 a:hover {
  background-color: orange;
}

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

.dropdown-02:hover .dropbtn-02 {
  background-color: grey;
}

.dropbtn-03 {
  background-color: transparent;
  color: yellow;
  padding: 7px;
  font-size: 12px;
}

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

.dropdown-content-03 {
  position: absolute;
  background-color: lightgrey;
  min-width: 30px;
  display: none;
  z-index: 3;
}

.dropdown-content-03 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content-03 a:hover {
  background-color: orange;
}

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

.dropdown-03:hover .dropbtn-03 {
  background-color: grey;
}

<div class="wrapper">
  <div class="dropdown-01">
    <button class="dropbtn-01">Main</button>
    <div class="dropdown-content-01"><a href="Link-1">Home</a> <a href="Link-2">The Mama</a> <
    </div>
  </div>
  <div class="dropdown-02">
    <button class="dropbtn-02">About</button>
    <div class="dropdown-content-02"><a href="Link-3">Credentials</a> <a href="Link-4">Aboutx</a> <
    </div>
  </div>
  <div class="dropdown-03">
    <button class="dropbtn-03">Contact</button>
    <div class="dropdown-content-03"><a href="Link-5">Contact Us</a> <
    </div>
  </div>
</div>