JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<div class="menu">
    <ul id="nav">
        <li>
            <div><a href="#">HOME<div class="hover"></div></a> 
            </div>
        </li>
        <li>
            <div><a href="#">ABOUT<div class="hover"></div></a>
            </div>
        </li>
        <li>
            <div><a href="#">PORTFOLIO<div class="hover"></div></a>
            </div>
        </li>
        <li>
            <div><a href="#">SERVICE<div class="hover"></div></a>
            </div>
        </li>
        <li>
            <div><a href="#">BLOG<div class="hover"></div></a>
            </div>
        </li>
        <li>
            <div><a href="#">CONTACT<div class="hover"></div></a>
            </div>
        </li>
    </ul>
</div>

CSS

.menu {
    background: #aaa;
    width: 950px;
    height: 50px;
    float: right;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    margin-top: 80px;
    border: 1px #FFF solid;
}
.menu #nav {
    list-style: none;
}
.menu #nav li {
    display: inline-block;
    padding: 0px 30px 0px 30px;
}
.menu #nav li > div {
    position: relative;
}
.menu #nav li a {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
}
.menu #nav li a:hover {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    color: #ca6666;
}
.menu #nav li a > .hover {
    display: none;
}
.menu #nav li a:hover > .hover {
    background: #333;
    background-position:center;
    width: 96px;
    height: 33px;
    color: #ca6666;
    font-weight: bold;
    display: block;
    top: -20px;
    position: absolute;
}
.clear {
    clear: both;
}