≡メニューをどう実装するかというのを見かけたので
その時の気分でよく変わるけど最近はこういう感じ

<div class="hover-target">
	<div class="face">≡</div>
	<ul class="menus">
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
	</ul>
</div>

<style>
	.hover-target {
		display: inline-block;
	}
	.hover-target:not(:hover) .menus {
		display: none;
	}
	.face {
		display: flex;
		width: 1.5em;
		height: 1.5em;
		justify-content: center;
		align-items: center;
		cursor: default;
		box-shadow: 0 0 2px 1px #0003;
	}
	.menus {
		border: 1px solid #bbb;
		margin: 5px 0;
		padding: 0;
		list-style: none;
	}
	.menus li {
		border-bottom: 1px solid #ddd;
		padding: 5px 15px;
		margin: 0;
		cursor: pointer;
	}
</style>