Hello. There is a menu, when you hover on it, a drop-down vertical menu appears. Only this happens instantly. I would like to add a delay of 2-3 seconds.

Unfortunately I did not manage to arrange all this beautifully in JSFiddle . Bulk CSS + maybe there is JS .

Menu link (vertical, product categories) http://demo.cs-cart.ru/stores/137929/ .

Thank you very much.

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

You need to add properties to the CSS classes:

 .ty-menu__submenu-items { display: block; opacity: 0; visibility: hidden; } .no-touch .ty-menu__item:hover .ty-menu__submenu-items, .is-hover-menu .ty-menu__submenu-items { display: block; visibility: visible; opacity: 1; transition: all linear 1s; }
  • Thank you for what you need. And how to remove the transition effect? - Lebedev
  • You can use the nonlinear transition function transition: all cubic-bezier (1, -0.3, 1, -0.35) 0.3s; - Robert Dampilon

 nav a { display: block; text-decoration: none; padding: 0 .5em; line-height: 2em; } nav ul { margin: 0; padding: 0; list-style-type: none; } nav li { display: inline-block; } nav li ul { display: block; position: absolute; transform: scale(0); transition: transform 1s step-end; } nav li li { display: block; } nav a:hover { background: silver; } nav li:hover > ul { transform: scale(1); } 
 <nav> <ul> <li> <a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1.1</a></li> <li><a href="#">Submenu 1.2</a></li> <li><a href="#">Submenu 1.3</a></li> </ul> </li><li> <a href="#">Menu 2</a> <ul> <li><a href="#">Submenu 2.1</a></li> <li><a href="#">Submenu 2.2</a></li> <li><a href="#">Submenu 2.3</a></li> <li><a href="#">Submenu 2.4</a></li> </ul> </li> </ul> </nav>