nepster-web
@nepster-web

Выпадающее горизонтально меню

Пишу выпадающее горизонтальное меню и вот возник какой вопрос.

У меня есть пункты меню к примеру:

Главная О компании Партнерам Справка Помощь

и к этим пунктам выпадающие пункты при наведении.

В дизайне возникла задача опустить выпадающие пункты меню на 30 px.

.menu-dropdown .dropdown {
position:absolute;
top:30px;
left:0;
z-index:100;
width:300px;
border: solid 1px red;
}


И получается когда я навожу например на Справка, выпадают вложенные пункты, но когда спускаю курсор вниз к ссылкам (попадаю как раз в эту область отступа в 30 пт) меню закрывается.

Подскажите пожалуйста варианты решения
  • Вопрос задан
  • 2846 просмотров
Решения вопроса 1
вместо top используйте padding или margin
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
MintTea
@MintTea
Подозреваю, что у вас .dropdown не явлется потомком элемента, для которого прописан :hover, или что-то в этом духе. Попробуйте посмотреть, как работает примерно то, что вы хотите.
Ответ написан
Для «.menu-dropdown .dropdown» вместо «top: 30px» можно паддинг сверху задать в те же 30 пикелей. Меню исчезает потому, что вы отодвигаете область выпадающего списка от ссылки и получается дырка, при попадании в которую мышью событие :hover прекращается. Соответственно, всё исчезает.

Так что, как вариант: в «dropdown» нужно вложить ещё один блок, которому задать всё визуальное оформление (рамки, фон и пр.), а самому «dropdown» задать:

.menu-dropdown .dropdown {
    left: 0;
    position: absolute;
    top: 0;
    width: 300px;
    z-index: 100;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы