<ul>
  <li>CSS3</li>
  <li>Navigation</li>
  <li>Slider</li>
  <li></li>
</ul>
body {
  background: #fcfcfc;
	color: #d7d7d7; 
  text-shadow: 0 1px 2px rgba(#00b6ff,0.4);
  font-family: sans-serif;
}

ul { 
  position: relative;
  width: 500px; 
  margin: 40vh auto; 
  
  &:hover > li:last-child { background: #00b6ff; }

  &:after {
    content: '';
    display: block;
    clear: both;
  }
  
}

li {
  transition: all 0.2s;
}

li:not(:last-child) {

  width: 33.3333333%; 
  float: left;
  padding: 7px 0;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  
  &:hover { color: #00b6ff; }

  &:nth-child(2):hover ~ li:last-child {
    left: 33.3333333%;
  }

  &:nth-child(3):hover ~ li:last-child {
    left: 66.6%;
  }

}

li:last-child {
  position: absolute; 
  bottom: 0;
  left: 0;
  display: block; 
  width: 33.3333333%; 
  height: 2px;
  background: #d7d7d7;
  box-shadow: 0 1px 2px rgba(#00b6ff,0.4);
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js