<ul>
  <li>Home</li>
  <li>About</li>
  <li>Work</li>
  <li>Contact</li>
</ul>
body {
  background: #F0E9D2;
}

ul {
  display: flex;
  list-style: none;
  margin: 120px 0;
  justify-content: center;
  padding: 0;
  gap: 0 20px;
  
  &:hover {
    li {
      &:not(:hover) {
        color: #bbb;
      }
    }
  }
}

li {
  color: #181D31;
  font-size: 18px;
  font-weight: bold;
  
  &:hover {
    cursor: pointer;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.