Вопрос касательно выпадающего меню

Question

[Yuri Yakovlev]

Привет! При наведении на portfolio выпадает меню. Я опустил сабменю немного ниже, и, соответственно, при попытке навести на него, оно уже успевает исчезнуть. Как сделать так, чтобы оно не исчезало. Как-то скрыто продлить его по высоте? Выставить как-то таймер? Использовать джаваскрипт? Или еще как-то?



Код меню на codepen.io

Спасибо!

Answer 1

[Иван Прилепский]

Если важна поддержка только современных браузеров, то можно и без js

.main-menu .sub-menu{
 
    background:#E2534B;
    padding:6px 6px 0 6px;
    margin:0;
 
 margin-top:20px;
   visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;

     position:absolute;
    width:200px;
    top:35px;
    list-style:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px; 
}
.main-menu>li:hover .sub-menu {
  
visibility:visible;
  opacity:1;
  transition-delay:0s;

}

Еще одни вариант

Comments

[Yuri Yakovlev]

Так и думал, что через транзишн можно сделать :) Немного доделал, все супер. Спасибо!

[Иван Прилепский]

Пожалуйста! :)

[user_tm]

Иван Прилепский, И от меня тоже огромное спасибо. Выручили!

Answer 2

[Кирилл]

Могу ошибаться, но посмотрите как это реализовано в бутстрапе
http://getbootstrap.com/javascript/#dropdowns

Answer 3

[Виталий]

сабменю нужно опустить свойством padding и подредактировать свойство top

.main-menu .sub-menu{
    padding-top: 20px;
    background:#E2534B;
    display:none;
    padding:6px 6px 0 6px;
    margin:0;
    position:absolute;
    width:200px;
    top:35px;
    list-style:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px; 
}

Answer 4

[Иван Желудков]

Оно реализовано с помощью псевдокласса hover? Если да, то вам нужно использовать JS, либо возможно создать с помощью псевдокласса after дополнительный невидимый прозрачный блок, который будет входить в пункт меню. Тогда будет нормально. Нужно полностью смотреть код меню, чтобы понять. Вы бы выложили это меню на codepen.io, тогда было бы значительно проще. Можно было бы скинуть вам готовый вариант.

Comments

[Yuri Yakovlev]

Да, точно, что-то сразу не догадался -- http://codepen.io/anon/pen/hpHqr

Answer 5

[Юрий Лобанов]

Самый простой способ - сделать задержку на js, как - зависит от того, как реализовано меню.
На bootstrap я делал так:

$('ul.nav li.dropdown').hover(function() {
	  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
	}, function() {
	  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
	});

Comments

[Yuri Yakovlev]

Возьму как запасной вариант, может попозже пригодится. Но пока хочу это на чистом ксс :) Спасибо!

[Юрий Лобанов]

А у меня была нужна поддержка ie7, и там вообще с этим меню много проблем было.