Выпадающее меню и позиционирование?

Question

[buzzloud]

Всем привет. Есть такое простенькое меню с выпадающим подменю. Сейчас в разделе "Услуги" выпадающему подменю координата сверху задана 30px, а может быть и 50px и 100px (т.е. мы можем опустить его еще ниже). Вопрос в том, как только на css сделать так, чтобы при наведении на "Услуги" мы могли спокойно курсор сместить вниз на любой из пунктов подменю и при этом оно не закрылось, когда курсор уводим с "Услуги". Ибо сейчас так и происходит. Подменю есть, но словить его не получается.

Answer 1

[Андрей Гончаров]

Оберни .sub-menu в .sub-menu-wrapper например
и с твоим кодом так получится примерно:

.sub-menu-wrapper{
  display: none;
  position: absolute;
  padding-top: 40px;
  width: 150px;
  top: 0px;
  left: -50px;
  z-index: 10;
}

.main-menu > li:hover .sub-menu-wrapper {
  display: block;
}

Comments

[buzzloud]

Спасибо!

Answer 2

[Дмитрий]

.sub-menu - top: 100%; + padding-top: 10px (используйте нужное значение)
https://jsfiddle.net/soledar10/LmrfrwLj/

Comments

[buzzloud]

Спасибо!

Answer 3

[HamSter]

Если css ом, то можно так попробовать.

*смысл: absolute top позиционирование sub-menu уменьшить, но сделать padding

Comments

[buzzloud]

Спасибо!

[HamSter]

buzzloud: нет за что )

[buzzloud]

Приятный у вас сайт)

[HamSter]

buzzloud: =) спасибо

Answer 4

[Василь Бойко]

codepen.io/ferdasfarmazone/pen/wGVRxW для выпадающего меню задать верхний отступ не margin или padding, а top: 100%

Comments

[buzzloud]

Спасибо!

Answer 5

[Seva Sargsyan]

codepen.io/buzzloud/pen/ONKaMw