Раскрывающиеся меню - у меня есть пример MooTools, но как я могу сделать его чистым CSS?

Question

Мне нравится, как главное меню этого сайта падает и исчезает. Есть много выпадающих плагинов и т. Д., Но эта конкретная реализация кажется мне действительно гладкой.

Проблема в том, что он работает на Mootools и MenuMatic (http://greengeckodesign.com/menumatic), но я почти уверен, что вы можете достичь тех же эффектов с помощью чистого CSS.

Я думаю, что "затухание" было бы достаточно легко осуществить с помощью перехода непрозрачности CSS, но я не уверен, как: 1) разрешить раскрывающиеся списки по динамике по ширине и 2) "прокрутить в вид", не нарушая разметку вокруг него. В прошлых проектах я обошел это с помощью «left: -9999em», и анимация от -9999em до целевого местоположения происходит так быстро, никто не знает ничего другого ... но это похоже на взлом.

Есть идеи?

Answer 1

Это возможно.

p {
  height:0; overflow:hidden;
  transition: all 2s;
  opacity: 0; background: salmon;
  width: 25%;
}
a:hover + p{
  height:100px; 
  overflow:auto;
  opacity: 1;
  transition: all 2s;}

Демо

Вам, конечно, потребуется настроить его и добавить префиксы поставщиков.