How to finalize a CSS 3 accordion menu based on the "transition" property?

Question

PHP

Good afternoon!
I implemented an accordion menu on my site using the "transition" property, but I would like to refine something ....
css example for clarity

.akkordeon ul{
   display:block;
  overflow: hidden;
   height:50px;
   transition: height 1s ease-in-out;
  -webkit-transition: height 1s ease-in-out;
}
.akkordeon ul:hover{
  height:300px;
}

When you hover over the menu, it expands to 300px at a certain speed, and if you remove the cursor from the menu before it is fully expanded, it will immediately begin to close.
This is not very convenient, for example, as on my website, the transition from the 1st menu to the 2nd is inconvenient (why, you can see here www.favorkrep.ru).
Question: is it possible to use just css to make the menu always expand to the end, regardless of the hover time? If only jquery can do it, then what is the easiest way to implement it, leaving my css 3 code already in work?
ps links to sensible jquery resources for dummies are welcome

Answer 1

Use the same hover, but in jquery - assign the active class to the menu item according to the haver.
And so - I do not advise using hover for such an important thing as a menu. Use hover as an aid, as the main - click.
To eliminate your problem, the following option immediately comes to mind: when having a haver, set some variable to false and start a timeout for the duration of the animation. After executing the timeout, set this variable to true. Accordingly, when having a check, check the value of the variable, and if it is false, do not process the hover event.

Answer 2

www.getbootstrap.com please)