Is there a ready-made script for the drop-down menu-catalog?

Question

JavaScript

On some pages of the site, it is necessary to implement a drop-down menu-catalog with sublevels, as implemented, for example, on such large sites as Ozon or Ulmart.

The problem is that if you use just jQuery and dropdowns (I'm not a JS master), then the directory works quite clumsily, unpleasant jambs like a closing sublevel if you move the mouse not strictly on the button, etc. Maybe someone knows some good ready-made solutions?

Answer 1

And what prevents to do it on one css?

Answer 2

Learn JS. Needed I think)

Answer 3

solution on css
codepen.io/iusfof/pen/Drjwc?editors=110 sweat example below in action
everything is simple:
html:
css:

.hover_me {
  width: 300px;
  margin: 0 auto;
  border: 10px solid grey;
  padding: 20px;
  text-align: center;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  transition: padding .5s 2s; //<= padding - свойство на которое влияет этот транзишон,
                              //.5s - время анимации, 2s - задержка анимации

                              //в данном случае получается, что при потере ховера
                              //в течении 2х секунд блок не будет возвращаться
                              //к первоначальному размеру, если в течении двух
                              //секунд опять будет ховер на блоке, то возврата
                              //к начальному состоянию не будет
}

.hover_me:hover {
  transition: padding .5s;    //<= здесь же не надо указывать задержку, чтобы анимация
                              //происходила сразу, хотя правильней буджет сказать, что
                              //тут указана задержка в 0 секунд (по дэфолту), при этом
                              //свойство указывать нужно иначе будет использовано
                              //свойство из обычного состояния объекта
  padding: 60px 20px;
}