CSS выпадающее меню выцветания перехода и отображения

Question

Я делал домашнее задание, и, похоже, вы не можете использовать эффект перехода CSS, когда используете display:none; и display:inline; и так далее.

Я хочу добавить в меню выпадающего меню выпадающее меню, чтобы сделать его более чистым. Это невозможно при использовании отображаемого элемента, как я обнаружил.

Я попытался удалить display из моего CSS, но когда я делаю это, элемент там (несмотря на то, что он не виден) и исчезает, когда вы наводите на него курсор. Я прочитал предложение добавить «pointer-events: none»; к этому, который не является совместимым с браузером. Это также заставляет мерцающий элемент мерцать, если вы снова наведите указатель мыши на него.

Я также использовал предложение анимации ключевого кадра CSS для постепенного исчезновения, используя элемент отображения, но не смог заставить это исчезать, когда уходит мышь. . :(

Я знаю, что это возможно, потому что я видел его на многих сайтах, но я просто не могу заставить его работать сразу на шахте

Вот мой код:

http://pastebin.com/zVQapUNz

Answer 1

Я написал код в jsfiddle.net

http://jsfiddle.net/3PD7D/1/

это делает работу, когда курсор мыши над I t, вы можете использовать ту же концепцию, чтобы изменить непрозрачность

from {opacity:1;} 
to {opacity:0;} 

чтобы скрыть меню. Однако это сделает его прозрачным, все, что осталось, будет видимым, но не кликабельным. Я не пробовал, что произойдет, если вы добавите отображение: нет в конец анимационного кадра.