JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul>
             <li><a class="link" href="#">Главная</a></li>
             <li><a class="link" href="#">Форум</a></li>
             <li><p><a class="link" href="#">Наши планы</a></li>
             <li><a class="link" href="#">Статьи</a></li>
             <li><a class="link" href="#">Фото</a></li>
             <li><a class="link" href="#">Контакты</a></li>
    </ul>
  </div>

CSS

#nav {font-weight:bold; width:100%; overflow:auto; padding:0 px; margin:0; background-color:#f5d20a; font-weight:bold; background: url('../images/navi-li.png') bottom left repeat-x;}
#nav ul {color:#003882; margin:0; padding:0; }
#nav ul li {float:left; list-style:none; padding:0; }
#nav ul li a {background-position: 50% 50%; color:#003882; display:block; width:120px; height:15px; padding:8px 0; margin:0 1px 0 0; text-align:center; background: url('../images/navi.png') bottom left repeat-x;}
#nav ul li a:hover {background-color: #8194aa; font-weight:bold; color:#003882; background: url('../images/navi-li-h.png')}