I searched through the Semantic-ui documentation, but I couldn't find clear instructions on how to designate a dropdown item as 'active' (highlighted without being opened) in my top navbar menu, similar to regular items.
The 'active' class is typically used to indicate an open state for items, whereas I want to use it to highlight menu links that are currently active.
To clarify, when I am on one of the routes within the menu dropdown item, I want it to be highlighted just like a link, but I'm unsure about the specific class I should be using.
Although I began creating my own CSS class for this purpose, I suspect there may already be a built-in keyword for achieving this effect, so I wanted to confirm.
EDIT: I quickly devised a solution and tested it with inverted menus, whether secondary or not. However, the original question remains unresolved.
.menu:not(.secondary) .dropdown.item.current{
background: rgba(255,255,255,.15);
color: #fff !important;
}
.menu:not(.secondary) .dropdown.item.current:after{
visibility: visible!important;
z-index: 100!important;
background: #3d3e3f !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
}
.menu.inverted .dropdown.item.current{
border-color: #fff;
}