Не работает transition при drop&down Меню.

[parnas]

C transition ами раньше не сталкивался. Помогите пожалуйста делать плавного появления блока при наведении на меню "Мой аккаунт"  Спасибо. http://jsfiddle.net/parnas/pZuG5/

[Galaxy]

http://jsfiddle.net/pZuG5/1/

[parnas]

Спасибо большое. Но как делать так, чтобы блок появлялся только при наведении на надпис? А так сейчас появляеться если наводить в пределах невидимого блока.

Edited June 26, 2014 by parnas

[psywalker]

Спасибо большое. Но как делать так, чтобы блок появлялся только при наведении на надпис? А так сейчас появляеться если наводить в пределах невидимого блока.

Можно сделать так. Но мне этот вариант не нравится, т.к. по факту подменю будет всегда висеть под главным меню (просто будет невидимым) и, как вариант, мешать ниженаходящимся элементам.  К сожалению, в transition нельзя добавить display:block, т.к. это объявление не входит в его список. Поэтому я бы сделал так, т.е. добавил бы свойство height.

[Switch74]

в этих примерах еще наверно понадобится

.hide-menu > ul:hover

чтобы выпадающее меню не исчезало при наведении на него

 

вариант интересный, но уж очень частный

[psywalker]

в этих примерах еще наверно понадобится

.hide-menu > ul:hover

чтобы выпадающее меню не исчезало при наведении на него

 

вариант интересный, но уж очень частный

Кстати, да, согласен. Не подумал об этом.

[parnas]

Всем огромное спасибо! Сделал по ващим инструкциям- все работает! Но блок почему-то все равно появляеться при наведении в пределах блока. Стараюсь разобратся.

Edited June 26, 2014 by parnas

[psywalker]

Всем огромное спасибо! Сделал по ващим инструкциям- все работает! Но блок почему-то все равно появляеться при наведении в пределах блока. Стараюсь разобратся.

Там размеры (ширину, высоту) нужно подобрать к выпадающему меню.

[parnas]

Вроде разобрался. кажется ваш способ в моем конкретном случае не работает. Так как абсолютно спозиционированный меню спозиционирован над ссылкой к которому нужно навести. И вот, ссылка остаеться под невидимым блоком. Таким образом, ссылку просто невидно. Из-за этого и не сработал. Есть еще способы? Или без JS никак? Вот как это нарисован:

Edited June 26, 2014 by parnas

[psywalker]

Вроде разобрался. кажется ваш способ в моем конкретном случае не работает. Так как абсолютно спозиционированный меню спозиционирован над ссылкой к которому нужно навести. И вот, ссылка остаеться под невидимым блоком. Таким образом, ссылку просто невидно. Из-за этого и не сработал. Есть еще способы? Или без JS никак? Вот как это нарисован:

Можно фон продлить от ссылки до низа самого меню выпадающего. Т.е. в самой ссылке сделать фон-шапку, а у выпадающего меню продолжить её.

[parnas]

Гмм..Спасибо за наводку. Сейчас попробую.

[alex.kv]

Попробуйте вот такой вот вариант http://codepen.io/alexkv/pen/Higel