Почему может не работать стиль transition-delay?

Итак, имеем менюху с выпадающими списками. В стилях это реализовано как display: none по умолчанию для подменю. И display: block для подменю при hover на основное меню.

Хотим сделать анимацию и задержку появления меню. Используем стиль transition с параметрами или просто стиль паузы transition-delay. Но из-за того, что подменю изначально назначено display: none, то transition работать не будет.

Для этого вместо display: none и display: block будем использовать opacity: 0; visibility: hidden; и opacity: 1; visibility: visible;.

Пример реализации можно посмотреть тут.