Is it possible to separate "active" and "hover" on a "simple dropdown menu"?

[rosensama]

Help Wanted

Problem

I'm trying to use a simple dropdown inside my menu to avoid JS. But I also want to be able to mark the top level item active when one of its children are selected. Unfortunately it seems that active and hover are linked and hover opens the menu. So when I mark the menu active, it extends the drop down.

Questions

Is there a way I can write some CSS to decouple this?

Or maybe a way to mark my top level menu item active and nest the dropdown further inside to avoid this?

Or maybe another class I could add to change this behavior?

Example

jsfiddle: https://jsfiddle.net/uwk1bme3/

I believe this is an example of the coupling in the css I'm trying to avoid:

.ui.simple.active.dropdown > .menu,
.ui.simple.dropdown:hover > .menu {
  overflow: visible;
  width: auto;
  height: auto;
  top: 100%;
  opacity: 1;
}

Thanks for taking a look.

[lubber-de]

You could use your own class to only set the background, but still gain the hover functionality to show the menu:

.ownactive {
  background: rgba(0,0,0,.05) !important;
}

See https://jsfiddle.net/3rbd8apk/

[rosensama]

@lubber-de Thanks!. Is there a way for me to "import" the same background setting as used by active instead of having to explicitly set to the same?

Instead of

.ownactive {
  background: rgba(0,0,0,.05) !important;
}

Something like

.ownactive {
  background: <reference_to .active.background>;
}

Sorry, but I'm just starting to learn CSS.

[lubber-de]

@rosensama Not using pure CSS (until you could inherit the color from the parent, which is not the case here).
But i have another solution:

Use the usual active and add another class which removes the menu when you are not hovering over it

.ownactive:not(:hover) > .menu {
  opacity: 0 !important;
}

See https://jsfiddle.net/8rvmoax1/