Hover Effect Not Working on .login-2-submenu Despite Correct CSS Implementation

Question

I'm encountering an issue with applying a hover effect to the .login-2-submenu class in my HTML and CSS setup. Despite defining a hover effect in my CSS file, the effect doesn't seem to take place when hovering over elements with this class. Strangely, other hover effects within the same CSS file are functioning correctly.

Here's a simplified version of my HTML code:

 <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>

and 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;
}

Despite this CSS rule, the hover effect is not applied when hovering over elements with the .login-2-submenu class.

I've tried several approaches, including directly targeting the .login-2-submenu class and adjusting its properties upon hover, but none seem to work. I've also made sure that there are no conflicting CSS rules overriding the hover effect.

Could someone please provide insights into why the hover effect might not be working specifically for the .login-2-submenu class? Any suggestions or solutions would be greatly appreciated. Thank you!

Answer 1

<l1 class="block px border"> just look this code, you have typed l1 instead of li

all li tags are misspelled in under .login-2-submenu