I am trying to work with my sub-menu on my Nav Menu Element, specifically for desktop only. I want the top and bottom sub-menu items, when selected/active, to have a different border radius to match the ul radius that is holding them. I have been able to change the top submenu item radius to 8px 8px 0px 0px and the bottom subment item radius to 0px 0px 8px 8px when hovered (This works). The issue I’m having is when the item is active. I saw that there is an added class of “.current-menu-item” which I’m thinking is part of the problem, but even adding something like “#menu-item-1601.current-menu-item:active” isn’t right, and I haven’t been able to solve it. Any help here is greatly appreciated.
Please note that I do as much research online for CSS help, as I’m more basic/intermediate with my knowledge of CSS.
My website URL is https://ascend-example.turleywebdesigns.com.
Here is my added CSS:
#menu-item-1594:hover {
border-radius: 8px 8px 0px 0px;
}
#menu-item-1594:active {
border-radius: 8px 8px 0px 0px;
}
#menu-item-1601:hover {
border-radius: 0px 0px 8px 8px;
}
#menu-item-1601:active {
border-radius: 0px 0px 8px 8px;
}