Dropdown Menu Hover doesn't seem to work?

Question

Dropdown menu hover is actually working but shows a different menu list element when I start pointing the mouse. For example, I was trying to choose a 'Shop' menu, when it hovers its shows an 'About' menu instead of hovering a list from the 'Shop' menu.

Also hover elements not displaying property... Could you guys help me?

here's are the codes:

 var ul = document.getElementById('navClass'); window.onscroll = () => { if(window.scrollY < 10){ ul.style.marginTop = '70px' ul.style.backgroundColor = "transparent"; ul.style.boxShadow = "none"; } else{ ul.style.marginTop = '0px' ul.style.backgroundColor = "#111"; ul.style.boxShadow = "0px 0px 20px black"; } }

 *{ padding:0px; margin:0px; box-sizing: border-box; } #navClass { color: white; padding: 3rem 0rem 1rem 0rem; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 7rem; margin-top: 70px; position: fixed; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; z-index: 10; } #navClass ul { display: flex; list-style-type: none; font-size: 1.7vw; margin-left: 150px; text-shadow: 2px 2px black; } #navClass li { padding: 0 10px 0 10px; cursor: pointer; font-size: 1.7vw; border-radius: 5px; transition:.5s; text-shadow: 2px 2px black; color: white; text-decoration:none; display:inline-block; z-index: 500; } #navClass a{text-decoration:none; color: white; } #navClass ul li:hover{ background:orange; border-radius: 5px 5px; } ul.sub-menu{ position:absolute; background-color: orange; list-style-type:none; margin-top:-5px; left:200px; width:auto; padding-left:0px; opacity:0; display: flex; align-items: center; flex-direction:column; justify-content: space-between; } ul.sub-menu li { display: inline-block; padding-left:0px; } ul.sub-menu li a:hover{ background-color: orangered; } #navClass li:hover.sub-menu { z-index:100; opacity:1; } /*'nav img' is a company Logo image*/ nav img { height: 5rem; left:-15px; position:relative; top: -60px; }.fa-bag-shopping{ position:relative; left:-1%; top:-80px; font-size:2vw; text-shadow: 2px 2px black; }.login{ position:relative; left: 4%; top:-80px; font-size: 1vw; text-shadow: 2px 2px black; padding-right:30px; text-decoration:none; }.fa-magnifying-glass{ left: 280px; position:relative; text-shadow: 2px 2px black; font-size:1.5em; }

 <nav id="navClass"> <img src="Images/AnaheraLogo.png" alt="Anahera Logo" /> <ul> <li ><a href = "Anahera_Homepage.html">Home</a></li>| <li><a href = "#">Shop<span class="arrow">&#9660;</span></a> <ul class ="sub-menu"> <li><a href="">Features</a></li> <li><a href="">Most Popular</a></li> <li><a href="">Flowers</a></li> <li><a href="">Plants</a></li> <li><a href="">Gifts</a></li> </ul> </li>| <li><a href = "#">Occasions<span class="arrow">&#9660;</span></a> <ul class ="sub-menu"> <li><a href="Anahera_Page2.html">Most Popular</a></li> <li><a href="">Valentines</a></li> <li><a href="">Wedding</a></li> <li><a href="">Birthday</a></li> <li><a href="">Anniversary</a></li> </ul> </li>| <li><a href = "#">About<span class="arrow">&#9660;</span></a> <ul class ="sub-menu"> <li><a href="">Location</a></li> <li><a href="">Blog</a></li> <li><a href="">Fresh Flowers Guaranteed</a></li> <li><a href="">Terms and Conditions</a></li> </ul> </li>| <li><a href = "#">Contact</a></li> </ul> <i class="fa-solid fa-magnifying-glass"></i> <a class ="login" style="color:white;" href ="#"> Join/Login</a> <i class="fa-solid fa-bag-shopping" style = color:white; href ="#"></i> </nav>

I tried to fix it for many hours but it doesn't seem to work and I'm almost out of my mind... Please help.

Answer 1

There is an issue with your CSS you are using the position fixed property for your submenu class that is opening your all submenus at a fixed position. I have edited the CSS please have a look and let me know if it solves the issue.

 var ul = document.getElementById('navClass'); window.onscroll = () => { if(window.scrollY < 10){ ul.style.marginTop = '70px' ul.style.backgroundColor = "transparent"; ul.style.boxShadow = "none"; } else{ ul.style.marginTop = '0px' ul.style.backgroundColor = "#111"; ul.style.boxShadow = "0px 0px 20px black"; } }

 *{ padding:0px; margin:0px; box-sizing: border-box; } #navClass { color: white; padding: 3rem 0rem 1rem 0rem; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 7rem; margin-top: 70px; position: fixed; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; z-index: 10; } #navClass > ul { display: flex; list-style-type: none; font-size: 1.7vw; margin-left: 150px; text-shadow: 2px 2px black; } #navClass li { padding: 0 10px 0 10px; cursor: pointer; font-size: 1.7vw; border-radius: 5px; transition:.5s; text-shadow: 2px 2px black; color: white; text-decoration:none; display:inline-block; z-index: 500; } #navClass a{text-decoration:none; color: white; } #navClass ul li:hover{ background:orange; border-radius: 5px 5px; } ul.sub-menu li a:hover{ background-color: orangered; } /*'nav img' is a company Logo image*/ nav img { height: 5rem; left:-15px; position:relative; top: -60px; }.fa-bag-shopping{ position:relative; left:-1%; top:-80px; font-size:2vw; text-shadow: 2px 2px black; }.login{ position:relative; left: 4%; top:-80px; font-size: 1vw; text-shadow: 2px 2px black; padding-right:30px; text-decoration:none; }.fa-magnifying-glass{ left: 280px; position:relative; text-shadow: 2px 2px black; font-size:1.5em; } /* Hide Dropdowns by Default */ #navClass ul ul { display: none; position: absolute; margin-left: 0; background-color: orange; list-style-type:none; padding-left:0px; align-items: center; flex-direction:column; justify-content: space-between; } /* Display Dropdowns on Hover */ #navClass ul li:hover > ul { display: flex; }

 <nav id="navClass"> <img src="Images/AnaheraLogo.png" alt="Anahera Logo" /> <ul> <li ><a href = "Anahera_Homepage.html">Home</a></li>| <li><a href = "#">Shop<span class="arrow">&#9660;</span></a> <ul class ="sub-menu"> <li><a href="">Features</a></li> <li><a href="">Most Popular</a></li> <li><a href="">Flowers</a></li> <li><a href="">Plants</a></li> <li><a href="">Gifts</a></li> </ul> </li>| <li><a href = "#">Occasions<span class="arrow">&#9660;</span></a> <ul class ="sub-menu"> <li><a href="Anahera_Page2.html">Most Popular</a></li> <li><a href="">Valentines</a></li> <li><a href="">Wedding</a></li> <li><a href="">Birthday</a></li> <li><a href="">Anniversary</a></li> </ul> </li>| <li><a href = "#">About<span class="arrow">&#9660;</span></a> <ul class ="sub-menu"> <li><a href="">Location</a></li> <li><a href="">Blog</a></li> <li><a href="">Fresh Flowers Guaranteed</a></li> <li><a href="">Terms and Conditions</a></li> </ul> </li>| <li><a href = "#">Contact</a></li> </ul> <i class="fa-solid fa-magnifying-glass"></i> <a class ="login" style="color:white;" href ="#"> Join/Login</a> <i class="fa-solid fa-bag-shopping" style = color:white; href ="#"></i> </nav>