Как сделать отступ в navbar dropdown, чтобы сам dropdown не закрывался при наведении?

Question

[Duioka]

Добрый вечер. Столкнулся с проблемой, хочу сделать отступ в .dropdown content, реализовал посредством margin-top, работает, однако в промежутке между кнопкой выпадающего списка и самим content сам dropdown закрывается. Эта же проблема была и в бутстраповском навбаре (только там проблема была с размерами самого навбара). Подскажите, как можно решить эту проблему?

(Пример) => https://codepen.io/lovebisquit/pen/xxxQmZa

Answer 1

[Natalia ivanova]

Посмотрите здесь https://codepen.io/Natalia_ai_ivanova/pen/ExxOrPq
За основу взяла код отсюда https://webformyself.com/resheno-s-pomoshhyu-css-v...
Добавила <li class="dropdown-interlayer"></li> для визуального отступа между меню и подменю.
Работает.

Тоже работает это https://codepen.io/Natalia_ai_ivanova/pen/xxxQMzV
Здесь с отступом сверху, без дополнительного класса.

С Вашей разметкой сходу так не получилось сделать)

Comments

[Duioka]

Огромное спасибо! Выручили!!!

[Duioka]

Я встроил первый пример в своё меню посредством <див>'ов, к сожалению, это немного не то. Это блок с цветом (белый), мне бы пустой/прозрачный блок/отступ, к сожалению так он виден на фоне и фоне других объектов(

Я пытался использовать rgba/opacity, но без толку, ибо этот блок в самом контенте сидит и принимает фон dropdown(

[Natalia ivanova]

background: transparent для блока пробовали задавать?
Чтобы я могла Вам помочь, покажите код, пожалуйста.

[Duioka]

Natalia ivanova,
Как-то так:
https://codepen.io/lovebisquit/pen/xxxQmZa

[Natalia ivanova]

Добавьте ещё один background: transparent;
У меня он в ul li ul.

У Вас так:

.dropdown-content {
  display: none;
  position: absolute;
 background: transparent;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 200;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
 background: #f9f9f9;
}

Должно получиться.

[Duioka]

Natalia ivanova, Заработало! Большое спасибо!

Answer 2

[Duioka]

Чёрт, еще одна проблема появилась. Теперь при длинных dropdown не успевая навестись на последние кнопки из списка, как dropdown закрывается(( Как заставить, это работать?

p.s. проверил, закрывается dropdown из-за того, что под ним слайдер. И как это исправить, нет ни малейшего представления

UPD: Со слайдером разобрался, оказывается надо было z-index выставить повыше. Но вопрос из шапки остается актуальным! Ребзя спасайте, в вёрстке новичок, не шарю в сленге(((