*{ 
  margin: 0;
  padding: 0;
}
body{
  background: rgb(30,30,30);
  color: white;
  font-family: sans-serif;
}
ul{
  list-style-type: none;
  position: absolute;
  left: 20px;
  top: 20px;
}
.underbar{
  width: 0;
  height: 5px;
  background: rgba(100,100,200,0);
  //left: -50px;
  top: 20px;
  position: absolute;
  -webkit-transition: 0.5s ease;
}
li{
  width: 50px;
  float: left;
    -webkit-transition: 0.5s ease;

  &:hover{
    text-shadow: 0px -2px 0px rgba(0,0,0,1), 0 0 5px rgba(255,255,255,0.8),0 -4px 15px rgba(255,255,255,0.5);
  }
  &:nth-of-type(1):hover ~ .underbar{
    left: 0;
    width: 40px;
    background: rgba(100,100,200,1);
  }
  &:nth-of-type(2):hover ~ .underbar{
    left: 50px;
    width: 40px;
    background: rgba(200,100,100,1);
  }
  &:nth-of-type(3):hover ~ .underbar{
    left: 100px;
    width: 40px;
    height: 1px;
    background: rgba(150,250,250,0.5);
    box-shadow: 0 0 10px rgba(70,250,250,1);
  }
  &:nth-of-type(4):hover ~ .underbar{
    left: 150px;
    width: 50px;
    height: 1px;
    background: rgba(150,250,250,0.5);
    box-shadow: 0 0 10px rgba(70,250,250,1);
  }
  cursor: pointer;
}