JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

ul{
list-style:none;
margin:0;
padding:0px 10px;
font-family:Tahoma; 
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
 -o-transform: skew(-20deg);
background: #222;
border-radius:5px;    
}

li{
display:inline-block;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
 -o-transform: skew(20deg);
}


li a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 10px;
font-size:20px;
}

li a:hover{
text-decoration:none;
color:#fff;
background:#999;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;    
position:relative;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
 -o-transform: skew(-20deg);
}

li a span{
display:block;
border-bottom:1px solid #fff;
}

li a:hover span{
display:block;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
 -o-transform: skew(20deg);
 border-bottom:1px dashed #fff;
}