下拉菜单 Hover 似乎不起作用？

Question

下拉菜单 hover 实际上有效，但当我开始指向鼠标时显示不同的菜单列表元素。 例如，我试图选择“商店”菜单，当它悬停时显示“关于”菜单，而不是悬停“商店”菜单中的列表。

还有 hover 元素不显示属性...你们能帮帮我吗？

这是代码：

 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>

我试图修复它好几个小时，但它似乎不起作用，而且我几乎失去了理智......请帮忙。

Answer 1

您的 CSS 有问题，您正在为您的子菜单 class 使用 position 固定属性，这会在固定的 position 打开您的所有子菜单。我已经编辑了 CSS 请看一下，如果它解决了问题，请告诉我。

 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>