CSS navigation example

Highlight navigation item on mouse hove by dimming others.

by Shishir Morshed

HTML

<nav>
	<ul>
		<li><a href="/about">Who We Are</a></li>
		<li><a href="/services">How We Help</a></li>
		<li><a href="/clients">Clients</a></li>
		<li><a href="/careers">Careers and Culture</a></li>
		<li><a href="/latest">Latest</a></li>
		<li><a href="/contact">Contact</a></li>
	</ul>
</nav>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  transition: all 100ms;
}

body {
  font-family: arial;
}

nav {
  display: block;
  min-height: 100vh;
  background: #131415;
  color: #fff;
}

a {
  color: inherit;
}


ul {
  display: inline-block;
  color: #fff;
  font-size: 40px;
  line-height: 50px;
  margin: 50px;
}

ul:hover {
  color: #2c2c2c!important;
}

li {
  list-style: none;
  color: #2c2c2c;
}

li:hover {
  color: #b84332!important;
}