<div class="drop">
	<a class="drop-trigger" href="#dropdown1">
		😋 Meyveler
		<svg class="icon icon-arrow">
			<use xlink:href="#icon-arrow"></use>
		</svg>
	</a>
	<div class="drop-down" id="dropdown1" tabindex="-1">
		<ul>
			<li><a href="">🍏 Elma</a></li>
			<li><a href="">🍌 Muz</a></li>
			<li><a href="">🥕 Havuç</a></li>
			<li><a href="">🍊 Portakal</a></li>
		</ul>
	</div>
</div>

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<symbol id="icon-arrow" viewBox="0 0 24 24">
			<path fill="none" d="M0 0h24v24H0z" />
			<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
		</symbol>
	</defs>
</svg>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

body {
	font-family: sans-serif;
	font-size: 16px;
	display: grid;
	place-items: center center;
	width: 100%;
	height: 100vh;
	background-color: #fefefe;
}

.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	fill: currentcolor;
}

.drop {
	position: relative;

	&-trigger {
		display: flex;
		align-items: center;
		column-gap: 8px;
		padding: 12px 16px;
		background-color: #eee;
		border-radius: 8px;
		color: #000;

		.icon {
			font-size: 18px;
		}
	}

	&-down {
		display: none;
		padding: 16px;
		box-shadow: 0 0 20px 0px rgba(#000, 0.09);
		border-radius: 8px;
		position: absolute;
		background-color: #fff;
		top: 110%;
		transition: 0.4s;
		width: 100%;
		right: 0;
		animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

		&:before {
			content: "";
			width: 10px;
			height: 10px;
			background-color: inherit;
			display: block;
			transform: rotate(45deg);
			position: absolute;
			top: -0.4em;
			right: 16%;
		}

		ul {
			display: flex;
			flex-direction: column;
			row-gap: 12px;

			li {
				a {
					color: #000;

					&:hover {
						color: red;
					}
				}
			}
		}

		&.active {
			display: block;
		}
	}
}

@keyframes shake {
	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}

	30%,
	50%,
	70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%,
	60% {
		transform: translate3d(4px, 0, 0);
	}
}

$(".drop-trigger").on("click", function () {
	$(this.hash).toggleClass("active").focus();
});

$(".drop-down").on("focusout", function () {
	$(this).removeClass("active");
});