子菜单中的悬停效果不起作用

问题描述

我想创建一个下拉菜单，在第二个下拉菜单中显示图像。我已经按照应编写的方式编写了 CSS 代码，并且我认为我的 HTML 代码的结构也没有问题。因此，将鼠标悬停在 Afyon White 列表项上后，应该会显示一个图像（位置尚未调整），但没有显示。有什么建议吗？

/* regardless */
li {
  list-style: none;
  text-transform: uppercase;
}

/* theme.scss */
.MegaMenu__Inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: Nowrap;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 10px;
}

@media screen and (min-width: 1240px) {
  .MegaMenu__Inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* sca-jqueryblabla.scss */

.MegaMenu__Item {
  display: inline-block;
  position: relative;
  width: 5rem;
  transition: all 0.9s ease-in-out;
}

.MegaMenu__Item > .MegaMenu__Title {
  display: inline-block;
}

.MegaMenu__Item > .MegaMenu__Title:hover {
  transition: all 0.9s ease-in-out;
}

.MegaMenu__Title--dropdown {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  margin-top: -1.5rem;
  margin-left: 4rem;
  width: 100%;
  transition: all 0.9s ease-in-out;
}

.DropdownList--li {
  width: 9rem;
  padding: 0.4rem;
}

.MegaMenu__Title--dropdown .DropdownList {
  display: block;
  position: relative;
}

.MegaMenu__Item:hover .MegaMenu__Title--dropdown {
  display: block;
  transition: all 9s ease-in-out;
}

.MegaMenu__Item.MegaMenu__Item--fit {
  cursor: pointer;
  padding: 0.5rem;
  text-align: center;
  background-color: white;
}

.MegaMenu__Item.MegaMenu__Item--fit a {
  text-decoration: none;
  color: #5c5c5c;
}

.MegaMenu__Item {
  position: relative;
}

.Linklist {
  position: absolute;
}

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

.color-nav {
  display: none;
  position: absolute;
  width: 10rem;
  height: 10rem;
  border: 3px solid black;
}

.DropdownList--li:hover .color-nav {
  display: inline-block;
}

<div class="MegaMenu__Item MegaMenu__Item--fit">
              <a href="" class="MegaMenu__Title heading Text--subdued u-h7"
                >White</a>
              <div class="MegaMenu__Title--dropdown">
                <ul class="DropdownList DropdownList_White">
                  <li class="DropdownList--li DropdownList_White--li">
                    <a>Afyon White</a>
                  </li>
                  <div class="color-nav">
                    <img src="" alt="">
                  </div>
                  </ul>
               </div>
</div>

解决方法

以下<div>：

 <div class="color-nav">
         <img src="" alt="">
 </div>

应该在具有类 <li> 的 DropdownList--li DropdownList_White--li 内，以便能够根据您的 CSS 进行选择，即：

.DropdownList--li:hover .color-nav {
  display: inline-block;
}

也就是说，在上面，您选择 .color-nav 作为 .DropdownList--li 的子代，但在您的 HTML 中，.color-nav 不是它的子代。