<!-- not responsive yet -->
<nav>
  <ul id="main">
    <li>Home</li>
    <li>About</li>
    <li>Skills
      <ul class="drop">
        <div>
        <li>scss</li>
        <li>jquery</li>
        <li>html</li>
        </div>
      </ul>
    </li>
    <li>Contact</li>
    <div id="marker"></div>
  </ul>
</nav>

$min-width: 120px;
$maincolor: #6BBE92;  
$secondarycolor: #3E8760;

@mixin transform($value){
  -webkit-transform: ($value);
     -moz-transform: ($value);
      -ms-transform: ($value);
          transform: ($value);
}
@mixin transition($value){
  -webkit-transition: ($value);
     -moz-transition: ($value);
      -ms-transition: ($value);
          transition: ($value);
}

*{
  box-sizing: border-box;
}
body{
  font-family: 'Open Sans', sans-serif;
  background: #374954;
  color: white;
  text-align: center;
}

#main{
  position: relative;
  list-style: none;
  background: $maincolor;
  font-weight: 400;
  font-size: 0;
  text-transform: uppercase;
  display: inline-block;
  padding: 0;
  margin: 50px auto;
  li{
    font-size: 0.8rem;
    display: inline-block;
    position: relative;
    padding: 15px 20px;
    cursor: pointer;
    z-index: 5;
    min-width: $min-width;
  }  
}
li{
  margin: 0;
}
.drop{
    overflow: hidden;
    list-style: none;
    position: absolute;
    padding: 0;
    width: 100%;
    left: 0;
    top: 48px;
    div{
      @include transform(translate(0,-100%));
      @include transition(all 0.5s 0.1s);
      position: relative;
    }
    li{
      display:block;
      padding: 0;
      width: 100%;
      background: $secondarycolor !important;
    }
  }
#marker{
  height: 6px;
  background: $secondarycolor !important;
  position: absolute;
  bottom: 0;
  width: $min-width;
  z-index: 2;
  @include transition(all 0.35s);
}

@for $i from 1 through 4{
  #main li:nth-child(#{$i}){
    &:hover ul div{
     @include transform(translate(0,0)); 
    }
    &:hover ~ #marker{
      @include transform(translate(#{(-1+$i)*$min-width},0));
    }
  }    
}