Issues with Hover state

Good afternoon! 

I've got a small issue that I can't figure out how to resolve. It's dealing with the built in state: hover.

I have a text box with two states. One is a custom state called position 2. The other is the built in state hover.

I've designed a menu that works sort of like the windows menu tree:

If you take a look at the attached video, you can see that what happens is that when the menu tree is clicked (the small triangle to the left of the capitalization rule that breaks down into further study), it shifts rule 3 4 and 5 to position 2 (which is below the scroll box that is unhidden).

When I go to hover, it has this odd flickering that I'm assuming is because there are two competing states at play here. I'm not sure how to make it where it'll keep the hover effect, but not try to move it back to its normal position to show the hover.

Has anyone come across this problem before, and is there a fix for this type of issue?

Thanks for the help.

Jesse Spinella

2 Replies