html - Hover effect isn't working in the sub-sub menu

Question

I would like to create a dropdown menu that displays an image in the second dropdown. I have written the CSS code as it should be written, and I think there is no problem with the structure of my HTML code as well. So, after hovering on Afyon White list item, there should be displayed an image(position is not adjusted yet) but it does not. Any suggestions?

/* 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>

question from:https://stackoverflow.com/questions/65602302/hover-effect-isnt-working-in-the-sub-sub-menu

Answer 1

The following <div>:

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

should be inside the <li> that has the class DropdownList--li DropdownList_White--li in order to be able to be selected as per your CSS which is:

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

That is, above, you are selecting .color-nav as a child of .DropdownList--li, but in your HTML the .color-nav is not its child.