Как сверстать тень?

Question

[hypero]

Всем привет.
Как можно сверстать такую тень?


Тут набросал немного https://codepen.io/dexter1996/pen/zYXWxXV

Comments

[askurashev]

В чем проблема?

[hypero]

askurashev, непонятно как правильно сверстать тень и у ссылки и у выпадашки.

[askurashev]

У выпадайки сверху тень уберите. Сделайте блок для пункта меню и у него добавьте тень слева и справа.

[askurashev]

.menu-item-has-children > a:hover {
	padding: 10px 20px 20px 20px;
	margin: 0;
	background-color: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -10px, 0);
	pointer-events: none;
	border-radius: 20px 20px 0 0;
	transition: transform 0.15s linear, opacity 0.25s ease, visibility 0.25s ease;
  opacity: 1;
	visibility: visible;
	pointer-events: all;
	transform: translate3d(0, 0, 0);
	filter: drop-shadow(rgba(0, 0, 0, 0.1) 0 20px 10px );
	transition-delay: 0.12s;}
.header-navigation > ul > li.menu-item-has-children:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	transform: translate3d(0, 0, 0);
	filter: drop-shadow(rgba(0, 0, 0, 0.1) 0 20px 10px );
	transition-delay: 0.12s;
}

Поведение сами поправьте.

[Ankhena]

И тут нет смысла в drop-shadow (по крайней мере из примера не видно зачем он), используйте обычный box-shаdow

Answer 1

[luxurypluxury]

Обычный box-shadow, просто блок который появляется при ховере перекрывает нижний box-shadow за счёт z-index ссылки если он находится столь близко как вы показали на скриншоте.
Или добавляйте тень по бокам.