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

Question

[Qurel]

Необxодимо сделать выпадающее меню. По макету оно должно наxодиться под header на определенном расстоянии. Если курсор мыши попадет в тот отступ от header, оно исчезнет. Также есть небольшой отступ между выпадающим меню и подменю.

Answer 1

[Алексей]

У списков меню и подменю нужно сделать прозрачную “подложку” из псевдоэлемента （before или after）, выступающую за на несколько пикселей. Это увеличит активную область, и в случае незначительного выхода курсора за контур самого меню, оно скраваться не будет.

Comments

[Qurel]

У меня почему-то псевдоэлемент распологается внутри родителя. Вот код:

.dropdown {
	position: absolute;
	left: -15px;
	width: 244px;
	padding: 15px 0;
	box-shadow: 2px 3px 1px rgba(108, 104, 10, 0.33);
	border-radius: 3px;
	border: 1px solid #dddfdf;
	background-color: #fff;
	&::before {
		content: '';
		display: block;
		background-color: #333;
		height: 12px;
	}
}

[Алексей]

Qurel, Псевдоэлемент на абсолюте должен быть. И размер ему удобно задаватьть указанием top:-5px; right:-5px;... и далее покругу. height там лишний, и с z-index нужно будет поиграть

[Qurel]

Спасибо, получилось!

Answer 2

[Dymok]

Задать отступ с помощью padding-left для внешней обёртки без фона, background и остальное поместить во внутреннюю обертку