Как сделать задержку выполнения в css*?

Question

[Bruck]

Добрый день! Понимаю, что вопрос сформулирован в корни неправильно, но постараюсь объяснить его верно.
У меня есть меню, в нем есть субменю. При наводе на меню, выпадает суб меню. Есть анимация плавного выхода, и в коде написано так, чтобы при отводе мыши от пункта, субменю въезжало обратно. Только проблема: Это не нужно когда внизу располагается еще один пункт с субменю и когда с первого пункта наводим на второй, то первое субменю пытается заехать обратно (скрыться) и через пол секунды не скрываясь выезжает обратно.

Сам код простой:

#menu ul li:hover > ul {
left: 287px;
text-align: left;
padding-left: 4px;
-webkit-transition: left 400ms ease-in;
-moz-transition: left 400ms ease-in;
-ms-transition: left 400ms ease-in;
transition: left 400ms ease-in;
}

#menu ul li > ul {
position: absolute;
background-color: #2E2E2E;
top: 0;
left: 34px;
text-align: left;
padding-left: 4px;
min-width: 200px;
z-index: -1;
margin-top: 37px;
height: 368px;
-webkit-transition: left 500ms ease-in;
-moz-transition: left 500ms ease-in;
-ms-transition: left 500ms ease-in;
transition: left 500ms ease-in;
}

Как сделать чтобы при выделении другого пункта меню, старый сразу не пытался скрыться, чтобы была задержка, или что-то другое.

Надеюсь я смог хоть чуть-чуть вопрос сформулировать правильно.

Comments

[devstudent]

код на codepen быстрее поможет решить ваш вопрос , здесь вы даете только стили, не всегда этого хватает чтобы понять в чем проблема

[Bruck]

devstudent: Есть на сайте, котором сейчас тестирую это: kassian.lostonbell.ru

[devstudent]

без джаваскрипта тут не обойтись

Answer 1

[Kanonier8]

Попробуйте вот так

#menu ul li:hover > ul {
  left: 287px;
}

#menu ul li > ul {
  position: absolute;
  background-color: #2E2E2E;
  top: 0;
  left: 34px;
  text-align: left;
  padding-left: 4px;
  min-width: 200px;
  z-index: -1;
  margin-top: 37px;
  height: 368px;
  -webkit-transition: left .5s .2s ease-in;
  -moz-transition: left .5s .2s ease-in;
  -ms-transition: left .5s .2s ease-in;
  transition: left .5s .2sease-in;
}

Comments

[Bruck]

Помогло, благодарю Вас Шамиль.

Answer 2

[Максим Тимофеев]

Задержку можно сделать с помощью transition-delay
или вместо transition использовать animate и @keyframes

Comments

[Bruck]

Пробовал, не работает. Тестирую здесь: kassian.lostonbell.ru Для наглядности вопроса

[Bruck]

Видите, когда я перемещаюсь по пунктам меню, субменю дергается, а этого не нужно

[Максим Тимофеев]

Bruck: Я думаю тут проблема в том, что Вы hover не на том элементе ловите