CSS падащо меню със закъснение

Нормално css падащо меню, направено чрез превключване на display:none; /дисплей:блок; висенето при задържане има два досадни недостатъка:

— подменюто се показва незабавно, щом курсорът на мишката влезе в зоната на родителския елемент — подменюто незабавно изчезва, щом курсорът напусне подменюто

Пример за такова меню:

За да създам малко забавяне преди показване и скриване на подменюто, използвах javascript, но сега попаднах на опция css.

Фокусът е върху свойството за преход или по-скоро върху неговото подсвойство за забавяне на прехода, което ви позволява да добавите закъснение преди показването на анимацията:

Тъй като анимацията не може да бъде окачена на дисплея, за да скриете подменюто, трябва да използвате opacity:0; видимост: скрита; .

Коментари

Използвах този метод, има недостатък, ако менюто / подменюто съдържа куп елементи, а самата страница има малко количество данни, внезапно може да се появи вертикално превъртане.

Показвам менюто с помощта на menu_tree. Уби цяла вечер и не можах да намеря адекватен начин за добавяне на „подменю“ и „елемент от подменю“ към дъщерни елементи. Тези. stdout поставя класовете "menu" и "menu-item" както в родителските, така и в дъщерните елементи на менюто. Как се генерира менюто, показано в примера? Разбира се, възможно е да се достигне до децата чрез css, но исках по-сбит начин без натрупване на каскади.

---