JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="top-navigations">
        <ul>
            <li><a class="ahover" href="#" title="Home">Home</a>

            </li>
            <li><a class="ahover" href="#" title="About">About</a>

            </li>
            <li><a class="ahover" href="#" title="Chothing">Chothing</a>

            </li>
            <li><a class="ahover" href="#" title="Shoes">Shoes</a>

            </li>
            <li><a class="ahover" href="#" title="Electronics">Electronics</a>

            </li>
            <li><a class="ahover" href="#" title="Perfumes">Perfumes</a>

            </li>
            <li><a class="ahover" href="#" title="Contact Us">Contact Us</a>

            </li>
        </ul>
    </div>
</div>

CSS

#wrapper {
    width:960px;
    padding:0;
    margin:0 auto;
}
#top-navigations {
    width:960px;
    height:48px;
    background-color:#218cc8;
    padding:0;
    clear:both;
}
#top-navigations ul {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#top-navigations li {
    list-style:none;
    position: relative;
    margin:0;
    padding:0;
    float:left;
}
#top-navigations li:after {
    content: url(http://01020304.o0.pm/images/red111.png);
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: -10px auto;
    width: 9px;
    height: 5px;
}
#top-navigations a {
    display:block;
    text-decoration:none;
    color:#ffffff;
    font: 700 20px/100% Arial;
    padding:15px 22px 13px 20px;
}
#top-navigations li:hover {
    background-color: #125c87;
}
#top-navigations li:hover:after {
    display: block;
}