.login-2-submenu类hover效果失效：CSS配置无误但未生效

在HTML/CSS项目中，为.login-2-submenu类设置的hover效果无法触发，但同CSS文件内其他hover效果均正常运行。已尝试直接定位该类、调整hover属性等方法，且确认无冲突规则覆盖，现分析问题原因并提供解决方案。

简化后的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>
                        <li class="block px border"><a class="black" href=""><i class="fa-solid fa-user"></i>My
                                Profile</a></li>
                        <li class="block px border"><a class="black" href=""><i
                                    class="fa-solid fa-circle-plus"></i>Flipkart Plus Zone</a></li>
                        <li class="block px border"><a class="black" href=""><i
                                    class="fa-solid fa-bag-shopping"></i>Orders</a></li>
                        <li class="block px border"><a class="black" href=""><i
                                    class="fa-solid fa-heart"></i>Wishlist</a></li>
                        <li class="block px border"><a class="black" href=""><i
                                    class="fa-solid fa-circle-dollar-to-slot"></i>Rewards</a></li>
                        <li class="block px border"><a class="black" href=""><i
                                    class="fa-solid fa-gift"></i>Gift Cards</a></li>
                    </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;
}

问题原因 #

1. HTML标签拼写错误：.login-2-submenu下的列表项使用了<l1>（数字1）而非正确的<li>（字母i），导致CSS中针对<li>的选择器无法匹配到目标元素，hover效果自然无法触发。
2. CSS样式优先级冲突：即使修正标签错误，.login-submenu ul li:hover规则中使用了!important，其优先级会覆盖.login-2-submenu ul li:hover的样式，导致后者的hover效果无法显现。

解决方案 #

1. 修正HTML标签：将所有<l1>和</l1>替换为<li>和</li>，确保CSS选择器能正确匹配元素。
2. 调整CSS优先级：
   • 方案一：移除.login-submenu ul li:hover中的!important，让更具体的选择器.login-2-submenu ul li:hover生效：

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

   • 方案二：增强.login-2-submenu ul li:hover的选择器权重，使其优先级高于父容器的hover规则：

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

内容的提问来源于stack exchange，提问作者user20404911