Как заставить подменю работать (при hover) если между меню и модменю есть margin?

Question

[freeman0204]

Меню добавил в подменю margin-top: 10px; без него все работает отлично.

Но у меня в макете есть отступ и еще в подменю присутствует тень. Выход есть, нужно просто сделать не margin-top: 10px; а верхний бордер 10px прозрачный, визуально будет тоже но будет работать.

Но как быть если есть тень и еще например треугольник в модменю и другие мелкие части?

Answer 1

[Alexander Lashchevsky]

А почему бы просто не обернуть подменю в дополнительный контейнер, которому указать padding-top: 10px;

jsfiddle.net/Lashchevsky/ge824sjp/1

Answer 2

[Anna_BS]

.sub-menu:after {
content: "";
position: absolute;
top: -10px;
left: 0px;
width: 100%;
height: 10px;
}
codepen.io/Anna_Batura/pen/pgvyOQ?editors=110

Comments

[freeman0204]

А если у меня на афтер уже висит треугольник на css, можно использовать для .sub-menu:after еще как то один афтер?

[Anna_BS]

Артур Черешнюк: можно before

[freeman0204]

Anna_BS: Хорошо. Спасибо!