<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;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.