尽管 CSS 实现正确，但悬停效果在 .login-2-submenu 上不起作用

Question

我在 HTML 和 CSS 设置中对 .login-2-submenu 类应用悬停效果时遇到问题。尽管在我的 CSS 文件中定义了悬停效果，但将鼠标悬停在此类的元素上时似乎不会发生该效果。奇怪的是，同一 CSS 文件中的其他悬停效果运行正常。

这是我的 HTML 代码的简化版本：

 <nav>
            <ul class="flex">
                <li class="px-2"> <input class="searchbox px-2" type="search" name="search"
                        placeholder="Search for products, brands and more" autocomplete="off"><i class="fa-solid fa-magnifying-glass"></i>
                </li>
                <li class="btn-li px-2"> <button><a href="">Login</a></button>
                    <div class="login-submenu">
                        <div class="login1-1-submenu">
                            <h4>New Customer?</h4>
                            <a class="black" href="#">Sign Up</a>
                        </div>
                        <div class="login-2-submenu">

                            <ul>
                                <l1 class="block px border"><a class="black" href=""><i class="fa-solid fa-user"></i>My
                                        Profile</a></l1>
                                <l1 class="block px border"><a class="black" href=""><i
                                            class="fa-solid fa-circle-plus"></i>Flipkart Plus Zone</a></l1>
                                <l1 class="block px border"><a class="black" href=""><i
                                            class="fa-solid fa-bag-shopping"></i>Orders</a></l1>
                                <l1 class="block px border"><a class="black" href=""><i
                                            class="fa-solid fa-heart"></i>Wishlist</a></l1>
                                <l1 class="block px border"><a class="black" href=""><i
                                            class="fa-solid fa-circle-dollar-to-slot"></i>Rewards</a></l1>
                                <l1 class="block px border"><a class="black" href=""><i
                                            class="fa-solid fa-gift"></i>Gift Cards</a></l1>
                            </ul>
                        </div>
                    </div>

                </li>
                <li class="px-4"> <a href="" class="text">Become a Seller</a></li>
                <li class="px-4 toggle"> <a href="" class="text">More</a>
                    <div class="sub-menu">
                        <ul>
                            <li><a href=""><i class="fa-solid fa-bell"></i>Notification Preferances</a></li>
                            <li><a href=""><i class="fa-solid fa-question"></i>24/7 Customer Care</a>
                            </li>
                            <li><a href=""><i class="fa-solid fa-arrow-trend-up"></i>Advertise</a></li>
                            <li><a href=""><i class="fa-solid fa-download"></i>Download App</a></li>
                        </ul>
                    </div>


                </li>
                <li class="px-5"> <a href="" class="text cart"><i class="fa-solid fa-cart-shopping"></i>Cart</a></li>
            </ul>
        </nav>

和CSS

.sub-menu {
  display: block;
  position: absolute;
  right: 170px;
  top: 50px;
  background-color: white;
  width: 250px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.sub-menu ul {
  text-align: left;
  margin: 0;
  padding: 0;
}
.sub-menu ul li {
  padding: 15.3px 10px;
  border-bottom: 1px solid #d0d9d4;
}

.sub-menu .fa-solid {
  padding: 0 10px;
  color: #2874f0;
}

.sub-menu ul li:hover {
  background-color: #ebf2f0;
}
.sub-menu ul li a {
  color: black;
}

/* -----------------------------------------------------------------------login-submenu---------------------------------------------- */

.login-submenu {
  background-color: white;
  position: absolute;
  top: 50px;
  right: 465px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  height: 345px;
  width: 250px;
}

.login-submenu ul {
  padding: 0;
  margin: 0;
}

.login-submenu .fa-solid {
  padding: 0 10px;
  color: #2874f0;
}

.sign {
  color: blue !important;
  font-size: 15px;
  font-weight: 600;
  transform: translate(160px, 0);
}

.login-submenu ul li:hover {
  background-color: #28cf8c !important;
}

.login1-1-submenu {
  display: flex;
  border-bottom: 1px solid #d0d9d4;
  padding: 15px 10px;
}

.login1-1-submenu h4 {
  color: rgba(20, 20, 20, 0.9);
}
.login1-1-submenu a {
  padding-left: 50px;
  color: blue;
  font-weight: 600;
}

.login1-1-submenu:hover {
  background-color: #ebf2f0;
}

.login-2-submenu ul li:hover {
  background-color: #ebf2f0 !important;
}

尽管存在此 CSS 规则，但将鼠标悬停在具有 .login-2-submenu 类的元素上时，不会应用悬停效果。

我尝试了多种方法，包括直接针对 .login-2-submenu 类并在悬停时调整其属性，但似乎都不起作用。我还确保没有冲突的 CSS 规则覆盖悬停效果。

有人可以提供关于为什么悬停效果可能不适用于 .login-2-submenu 类的见解吗？任何建议或解决方案将不胜感激。谢谢！

Answer 1

<l1 class="block px border">

只要看一下这段代码，您输入的是

l1

而不是

li

所有

li

标签在

.login-2-submenu

下都拼写错误