<nav>
<ul class="ttmenu">
<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 class="ttmarc"></div>
</ul>
</nav>CSS:
* {box-sizing: border-box;}
body {font-family: 'Open Sans', sans-serif;background: #374954;color: white;text-align: center;}
.ttmenu {position: relative;list-style: none;background: #6BBE92;font-weight: 400;font-size: 0;text-transform: uppercase;display: inline-block;padding: 0;margin: 50px auto;}
.ttmenu li {font-size: 0.8rem;display: inline-block;position: relative;padding: 15px 20px;cursor: pointer;z-index: 5;min-width: 120px;}
li {margin: 0;}
.drop {overflow: hidden;list-style: none;position: absolute;padding: 0;width: 100%;left: 0;top: 48px;}
.drop div {transform: translate(0, -100%); transition: all 0.5s 0.1s;position: relative;}
.drop li {display: block;width: 100%;background: #3E8760 !important;}
.ttmarc {height: 6px;background: #3E8760 !important;position: absolute;bottom: 0;width: 120px;z-index: 2;transition: all 0.35s;}
.ttmenu li:nth-child(1):hover ul div {transform: translate(0, 0);}
.ttmenu li:nth-child(1):hover ~ .ttmarc {transform: translate(0px, 0);}
.ttmenu li:nth-child(2):hover ul div {transform: translate(0, 0);}
.ttmenu li:nth-child(2):hover ~ .ttmarc {transform: translate(120px, 0);}
.ttmenu li:nth-child(3):hover ul div {transform: translate(0, 0);}
.ttmenu li:nth-child(3):hover ~ .ttmarc {transform: translate(240px, 0);}
.ttmenu li:nth-child(4):hover ul div {transform: translate(0, 0);}
.ttmenu li:nth-child(4):hover ~ .ttmarc {transform: translate(360px, 0);}