下拉菜单-列表项彼此重叠菜单

Question

我已经看过几部视频，但似乎无法正确播放。

我正在使用CSS和HTML进行下拉。我已经创建了一个按钮，将鼠标悬停在该按钮上，将显示一个下拉列表。但是当子项目悬停时，我想创建另一个菜单。菜单向右显示。我做到了，但仅适用于一个列表项。当我将鼠标悬停在另一个列表项上时，这两个菜单就会以某种方式彼此折叠。

当我将鼠标悬停在按钮上时：

当我将鼠标悬停在一个列表项（手机和平板电脑）上，而其他列表项没有嵌套时：

当我在第二个列表项（女士时装）中添加某些内容并悬停在第一个列表项时，它们会折叠：

在最后一个屏幕截图中，我为第二个列表项分配了一个具有相同属性的不同类，除了余量，这是因为我稍微增加了边距，然后看到第一个列表项的菜单没有消失或隐藏。它们彼此重叠：

前两个屏幕截图的代码：-

.dropdownBtn {
  background: white;
  color: black;
  font-size: 16px;
  padding: 16px;
  border: none;
  min-width: 120px;
  border: 1px solid black;
}

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

.dropdownContent {
  display: none;
  position: absolute;
  background: #f1f1f1;
  min-width: 158px;
  z-index: 1;
  border: 1px solid black;
}

.dropdownContent a {
  padding: 12px 16px;
  display: block;
}

.dropdownBeta:hover .dropdownContent {
  display: block;
  line-height: 15px;
  font-size: 12px;
}

.dropdownInsideContent2 {
  display: none;
  position: absolute;
  background: #f1f1f1;
  border: 2px solid black;
  margin-left: 160px;
  margin-top: -35px;
  width: 800px;
  height: 460px;
  z-index: 1;
}

.dropdownInsideContent2 a {
  text-decoration: none;
  padding: 12px 16px;
}

.dropdownContent:hover .dropdownInsideContent2 {
  display: block;
}

<div class="dropdownBeta">
  <button class="dropdownBtn">Dropdown</button>
  <div class="dropdownContent">
    <a href="#">Phones &amp; Tablets
                    <div class="dropdownInsideContent2">
                        <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>
  </div>
  </a>
  <a href="#">Women's Fashion</a>
  <a href="#">Men's Fashion</a>
  <a href="#">Beauty &amp; Health</a>
  <a href="#">Appliances</a>
  <a href="#">Computing &amp; Gaming</a>
  <a href="#">Home &amp; Living</a>
  <a href="#">TV, Audio &amp; Cameras</a>
  <a href="#">Baby, Toys &amp; Kids</a>
  <a href="#">Sports &amp; Travel</a>
  <a href="#">Grocer's Shop</a>
  <a href="#">Other Categories</a>
</div>
</div>

最后一个屏幕截图的代码：-

HTML

.dropdownBtn {
  background: white;
  color: black;
  font-size: 16px;
  padding: 16px;
  border: none;
  min-width: 120px;
  border: 1px solid black;
}

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

.dropdownContent {
  display: none;
  position: absolute;
  background: #f1f1f1;
  min-width: 158px;
  z-index: 1;
  border: 1px solid black;
}

.dropdownContent a {
  padding: 12px 16px;
  display: block;
}

.dropdownBeta:hover .dropdownContent {
  display: block;
  line-height: 15px;
  font-size: 12px;
}

.dropdownInsideContent1 {
  display: none;
  position: absolute;
  background: #f1f1f1;
  border: 2px solid black;
  margin-left: 360px;
  margin-top: -40px;
  width: 800px;
  height: 460px;
  z-index: 1;
}

.dropdownInsideContent2 {
  display: none;
  position: absolute;
  background: #f1f1f1;
  border: 2px solid black;
  margin-left: 160px;
  margin-top: -35px;
  width: 800px;
  height: 460px;
  z-index: 1;
}

.dropdownInsideContent1 a,
.dropdownInsideContent2 a {
  text-decoration: none;
  padding: 12px 16px;
}

.dropdownContent:hover .dropdownInsideContent1,
.dropdownContent:hover .dropdownInsideContent2 {
  display: block;
}

<div class="dropdownBeta">
  <button class="dropdownBtn">Dropdown</button>
  <div class="dropdownContent">
    <a href="#">Phones &amp; Tablets
                        <div class="dropdownInsideContent2">
                                
    <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>

  </div>
  </a>
  <a href="#">Women's Fashion
                        <div class="dropdownInsideContent1">
                                
  <a href="#">A</a>
  <a href="#">B</a>
  <a href="#">C</a>

</div>
</a>
<a href="#">Men's Fashion</a>
<a href="#">Beauty &amp; Health</a>
<a href="#">Appliances</a>
<a href="#">Computing &amp; Gaming</a>
<a href="#">Home &amp; Living</a>
<a href="#">TV, Audio &amp; Cameras</a>
<a href="#">Baby, Toys &amp; Kids</a>
<a href="#">Sports &amp; Travel</a>
<a href="#">Grocer's Shop</a>
<a href="#">Other Categories</a>
</div>
</div>