A Pen by betul.

hover-fading-navigation-bar.markdown

hover fading navigation bar

A Pen by betul on CodePen.

License.

index.html

<ul><h1>MENU ONE</h1>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CONTACT</a></li>
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 2</a></li>
  <li><a href="">Menu 3</a></li>
  <li><a href="">Menu 4</a></li>
  <li><a href="">Menu 5</a></li>
</ul>

<ul id="secondMenu"><h1>MENU TWO</h1>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CONTACT</a></li>
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 2</a></li>
  <li><a href="">Menu 3</a></li>
  <li><a href="">Menu 4</a></li>
  <li><a href="">Menu 5</a></li>
</ul>

<ul id="thirdMenu"><h1>MENU THREE</h1>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CONTACT</a></li>
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 2</a></li>
  <li><a href="">Menu 3</a></li>
  <li><a href="">Menu 4</a></li>
  <li><a href="">Menu 5</a></li>
</ul>

<ul id="fourthMenu"><h1>MENU FOUR</h1>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CONTACT</a></li>
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 2</a></li>
  <li><a href="">Menu 3</a></li>
  <li><a href="">Menu 4</a></li>
  <li><a href="">Menu 5</a></li>
</ul>

style.css

body {
  background: black;
  font-family: Futura;
}
ul{
  width: 230px;
  background-color: black;
  float: left;
}
h1{
  font-family: Futura;
  color: white;
  text-align: center;
  font-size:16px;
}

li a{
  display: block;
  width: 196px;
  padding: 3px 4px;
  margin: 5px 13px;
  color: #969E8D;
  border-bottom: 1px solid #96BF1F;
    -moz-transition: background-color .3s ease-in;
  -webkit-transition: background-color .3s ease-in;
  -o-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
}

li a:hover{
  background-color: #96C11F;
  color: #fff;
  -moz-transition: background-color 0.01s;
  -webkit-transition: background-color 0.01s;
  -o-transition: background-color 0.01s;
  transition: background-color 0.01s;
}

#secondMenu li a{
    display: block;
  width: 196px;
  padding: 3px 4px;
  margin: 5px 13px;
  color: gray;
  border-bottom: 1px solid #FF6262;
    -moz-transition: background-color .3s ease-in;
  -webkit-transition: background-color .3s ease-in;
  -o-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
}

#secondMenu li a:hover{
  background-color: #FF6262;
  color: #fff;
  -moz-transition: background-color 0.01s;
  -webkit-transition: background-color 0.01s;
  -o-transition: background-color 0.01s;
  transition: background-color 0.01s;
}


#thirdMenu li a{
    display: block;
  width: 196px;
  padding: 3px 4px;
  margin: 5px 13px;
  color: gray;
  border-bottom: 1px solid #6666FF;
    -moz-transition: background-color .3s ease-in;
  -webkit-transition: background-color .3s ease-in;
  -o-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
}

#thirdMenu li a:hover{
  background-color: #6666FF;
  color: #fff;
  -moz-transition: background-color 0.01s;
  -webkit-transition: background-color 0.01s;
  -o-transition: background-color 0.01s;
  transition: background-color 0.01s;
}

#fourthMenu li a{
    display: block;
  width: 196px;
  padding: 3px 4px;
  margin: 5px 13px;
  color: gray;
  border-bottom: 1px solid #0099FF;
    -moz-transition: background-color .3s ease-in;
  -webkit-transition: background-color .3s ease-in;
  -o-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
}

#fourthMenu li a:hover{
  background-color: #0099FF;
  color: #fff;
  -moz-transition: background-color 0.01s;
  -webkit-transition: background-color 0.01s;
  -o-transition: background-color 0.01s;
  transition: background-color 0.01s;
}