Почему не применяется transition ко вложенному списку?

Question

[vladHD]

Приветствую всех, собвственно вопрос в заголовке, имеется список формата

<ul class="main-list">
       <li><a>....</a>
             <ul class="sub-list">
                     <li><a>....</a><li>
             <ul>
      <li>
<ul>

При наведении на лишку главного списка выпадает торостепенный список, но никак не могу прикрутить к этому процессу transition, т.е выпадение и скрытие списка происходит мгновенно, в чем проблема может быть ? Всем спасибо заранее.

Answer 1

[Арсений Ильяшов]

Нужно заменить display: none на visiblity: hidden; opacity: 0.
Другой вариант: использовать jQuery show() - hide()

Answer 2

[Евгений Лебедев]

transition не отработает, если элемента нет в отрендереном dom, к примеру прописан display: none;

Answer 3

[vladHD]

и как бороться с этим ? может как-то через js можно прицепить небольшую задержку ?