<menu>
	<li>
		<a href="#">Home</a>
	</li>
	<li>
		<a href="#">About</a>
	</li>
	<li>
		<a href="#">Service</a>
	</li>
	<li>
		<a href="#">Contact</a>
	</li>
	<li></li>
	<li>
		<a href="#">Log in</a>
		<strong>⁝</strong>
		<a href="#">Sign up</a>
	</li>
</menu>

menu:has(a:hover) a:not(:hover) {
	opacity: 0.3;
}

a {
	text-decoration: none;
	transition: all 0.3s ease;
}

li {
	list-style-type: none;
}

menu {
	width: fit-content;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	margin: 20px auto 0;
	padding: 15px 30px;
	border-radius: 30px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

	a {
		font-family: sans-serif;
		color: #222;
		font-weight: 600;
		font-size: 15px;
		text-transform: uppercase;
	}
}