Как реализовать такое подменю?

Question

[Вероника]

Необходимо сделать такое подменю, чтоб визуально был зазор между ним и основным меню. Как сделать аккуратно и красиво, с минимум кода?

Answer 1

[Максим]

ну а что вы уже сделали ?
нам на что опираться - от чего "плясать" ?
делается это прозрачным border и все дела

Comments

[Вероника]

https://codepen.io/Ammodit/pen/wdrmMN

[Максим]

Вероника: Лан Вероника , смотрите так вам надо ? https://codepen.io/Geyan/pen/GmMxqX?editors=1100

[Вероника]

Спасибо, border-bottom+box-shadow решило проблему.

Answer 2

[Ankhena]

1. margin-top
2. позиционирование

Дальше - выкладывайте ваш код и говорите, что не получается.

Comments

[Вероника]

Эти варианты не подходят, так как подменю исчезает при попытке навести на него мышку.

[Ankhena]

Вероника: Подходят.

Выпадающий блок должен быть внутри того, на который наводят мышкой.

[Вероника]

Ankhena W: он и есть внутри.

https://codepen.io/Ammodit/pen/wdrmMN

[Ankhena]

Вероника: https://jsfiddle.net/78e35d6o/ у меня ничего не закрывается раньше времени

[Ankhena]

Вероника: у вас: .navigation a:hover ~ .navigation-item
Это не внутри, это РЯДОМ

[Вероника]

Ankhena W: да, действительно. но тут тогда другая проблема. Если сделать вместо a li, то подменю вообще не выпадает, тк ссылка сделана блоком и "перекрывает" родителя (как я поняла). либо тут другой глюк, которого я не вижу.

[Сергей Тутуков]

1. .sub-menu нужно делать через position:absolute; и тогда это не будет работать.
2. многоуровневое меню всегда нужно делать через js. Тем более sub-menu больше, чем пункт основного меню (нужно писать условие, чтобы ничего не вылазило за пределы контейнера).

[Ankhena]

Вероника: Вот симпатичный плагинчик https://superfish.joelbirch.co/examples/
Чтобы душа пела, конечно, лучше ручками, но и его можно адаптировать.