JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class='selected'> <a href="/users/credits">Credits</a>

    </li>
    <div class='line-separator'></div>
    <li> <a href="/users/edit">Change Password</a>

    </li>
    <div class='line-separator'></div>
    <li> <a href="#">Investor Status</a>

    </li>
</ul>

CSS

ul, li {
    list-style:none;
}
li {
    display:inline-block;
    width:120px;
    padding:10px;
    background:#999
}
li:hover {
    background-color: blue;
}
a {
    color: white;
    font:13px Arial;
    text-decoration:none;
}
li:hover:after {
    content:"";
    position: relative;
    top: 33%;
    float:right;
    margin-right:-29px;
    border-top: 10px solid transparent;
    border-left: 10px solid blue;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
}