CSS3 Navigation Column Expansion Concept

by lasha

HTML

<div class="container">
  <h1>Lasha Krikheli</h1>
  <h2>Front-end, iOS Developer</h2>
  <ul class="nav">
    <li>Home</li>
    <li>About</li>
    <li>Work</li>
    <li>Contact</li>
    <li>Misc</li>
  </ul>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Sansita');
@import url('https://fonts.googleapis.com/css?family=Arapey|Oswald');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@import url('https://fonts.googleapis.com/css?family=Muli');
body { margin: 0;}
.container {
  width: 500px;
  margin: 0 auto;
  padding: 40px 0;
  background-color: #EFEA5A; // #048BA8 #16DB93 #EFEA5A #A4036F
  overflow: hidden;
}
h1 {
  /* font-family: 'Sansita', sans-serif; */
  font-family: 'Playfair Display', sans-serif;
  font-weight: normal;
  font-size: 50px;
  color: #A4036F; // #333, #A4036F
  /* letter-spacing: 1px; */
  margin: 0 0 5px;
  text-align: center;
}
h2 {
  /* font-family: 'Sansita', sans-serif; */
  font-family: 'Muli', sans-serif;
  font-size: 20px;
  color: #048BA8; // #999
  letter-spacing: 1px;
  margin: 0 0 55px;
  text-align: center;
}
.nav { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav li {
  position: relative;
  font-family: 'Sansita', sans-serif;
  margin: 0 auto; padding: 15px 0; letter-spacing: 1px;
  /* float: left; */
  width: 20%;
  /* border-radius: 10px; */
  &:hover { color: #fff; }
  &:hover {
    background-color: #048BA8;
    z-index: 10;
  }
  /* &:nth-child(1):hover {
    background-color: #048BA8;
  }
  &:nth-child(2):hover {
    background-color: #16DB93;
  }
  &:nth-child(3):hover {
    background-color: #EFEA5A;
  }
  &:nth-child(4):hover {
    background-color: #F29E4C;
  }
  &:nth-child(5):hover {
    background-color: #A4036F;
  } */
}
.nav li:after {
  content: "";
  position: fixed;
  height: 40px;
  /* width: 0; */
  //top: 136px;
  left: 50%;
  right: 50%;
  /* top: -100%; left: 0; bottom: -100%; right: 0; */
  //top: -100%; bottom: -100%;
  background-color: #c1c1c1; // red, #16DB93
  opacity: 0;
  transition: all .2s ease-in-out;
}
.nav li:hover:after {
      /* width: 100%; */
      left: 0;
      right: 0;
      opacity: .3;
      z-index: 0;
    }