I need help creating a dropdown menu that shows an image when hovering over a specific item. I have checked my CSS code and HTML structure, but the image is not appearing as expected when I hover over the "Afyon White" list item. Any ideas on how to fix this?
/* 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>