Эффект наведения не работает в .login-2-submenu, несмотря на правильную реализацию CSS ⇐ CSS

[Anonymous]

Я столкнулся с проблемой применения эффекта наведения к классу .login-2-submenu в моих настройках HTML и CSS. Несмотря на определение эффекта наведения в моем файле CSS, этот эффект, похоже, не проявляется при наведении курсора на элементы с этим классом. Как ни странно, другие эффекты наведения в том же файле CSS работают правильно.
Вот упрощенная версия моего HTML-кода:

Код: Выделить всё

 
[list]
[*] [i]                        placeholder="Search for products, brands and more" autocomplete="off">[/i]

[*] [url=#]Sign Up[/url]


[i][/i]My
Profile
[i]                                            class="fa-solid fa-circle-plus">[/i]Flipkart Plus Zone
[i]                                            class="fa-solid fa-bag-shopping">[/i]Orders
[i]                                            class="fa-solid fa-heart">[/i]Wishlist
[i]                                            class="fa-solid fa-circle-dollar-to-slot">[/i]Rewards
[i]                                            class="fa-solid fa-gift">[/i]Gift Cards
[/list]



[*] Become a Seller
[*] More

[list]
[i][/i]Notification Preferances
[*][i][/i]24/7 Customer Care

[*][i][/i]Advertise
[*][i][/i]Download App
[/list]


[*] [i][/i]Cart

и 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? -класс подменю? Любые предложения или решения будут с благодарностью приняты. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/751 ... ementation