JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
            <li><a href="">Главная страница</a></li>
            <li><a href="">О компании</a></li>
            <li><a href="">Услуги</a></li>
            <li><a href="">Популярное</a></li>
            <li><a href="">Контактная информация</a></li>
        </ul>

CSS

ul{
list-style:none;
margin:0;
padding:0;
font-family:Tahoma;    
}

li{
display:inline-block;
}


li a{
display:block;
text-decoration:underline;
color:#000;
padding:0px 5px 2px 5px;
font-size:20px;
}

li a:hover{
text-decoration:none;
color:#fff;
background:#4472e8;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;    
position:relative;
}

li a:hover:after{
content: '';
position:absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid #4472e8;
bottom:-10px;
left:43%;
}