I have created a perspective style class for the menu tree items, it's working in on the main menu items, however it partially works on the sub menu items. Also, I can't figure out how to remove the on hover highlight on the sub menu items.
/* Menu */
.psc-ali_menu_items {
color: var(--color-label-0);
border: none;
font-weight: 500;
font-size: 18px;
display: inline-block;
position: relative;
}
.psc-ali_menu_items:hover {
color: var(--color-select);
font-weight: bold;
}
.psc-menu_items::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
background: var(--color-select);
width: 0;
height: 2px;
transition: width 500ms;
}
.psc-menu_items:hover::after {
width: 100%;
}
Also, I was wondering if it's possible to change the color of the label icon and nav icon on hover using css without scripting, because when I create a class for th icon, I have to hover over the icon specifically, but if I only hover on the item, only the label is affected by any css :hover effect.