JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menumain">
    <ul>
        <li><a href="#">О магазине</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</div>

CSS

.menumain {
background-color:yellow;
width: 584px;
height: 38px;
float: left;
margin-left: 25px;
margin-top: 40px;
}

.menumain ul {
float: left;
display: block;
}

.menumain li {
text-align:center;
float: left;
display: block;
line-height: 38px;
font-size: 11px;
text-transform: uppercase;
background-color:yellow;
height: 100%;
overflow: hidden;
padding-right: 20px;
padding-left:10px;
}

.menumain li a {
color: #6d2626;
line-height: 38px;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
}
.menumain li:hover{
background-color:gray;   
}
.menumain li a:hover {
color: #f7f7f7;
line-height: 38px;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
}