HTMLにSCSSで ナビメニューを動かしたいです。

Question

HTML と　SCSS　でナビメニューを作っていますが、データの描き方と、紐付け方がわかりません。
なんとか動かしたいです。よろしくお願いいたします。

「HTML」

<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>

「scss」

$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));
}
}
}