JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Navigation -->
    <div id="nav">
        <ul>
            <li class="item1"><a href="">Каталог  изображений</a></li>
            <li class="item2"><a href="">Каталог<br />декоров</a></li>
            <li class="item3"><a href="">Прайс-лист</a></li>
            <li class="item4"><a href="">Контакты</a></li>
            <li class="item5"><a href="">Информация</a></li>
        </ul>
    </div>
    <!-- /Navigation -->

CSS

#nav {
    background: #ffffff url('http://cs315720.userapi.com/v315720267/2753/YK3Y_I9r1hc.jpg') no-repeat;
    width: 952px;
    height: 145px;
    margin: 0 auto;
    margin-top: 7px;
}
    
#nav ul {
    position: relative;
    height: 145px;
    z-index: 999;
    margin-top: 0;
    margin-left: 130px;
}
    
#nav ul  li {
    display: inline-block;
    list-style-type: none;
    width: 116px;
    height: 145px;
}

#nav ul  li a {
    display: block;
    position: relative;
    text-align: center;
    padding-top: 90px;
    text-transform: uppercase;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #5c5c5c;
    margin-top: 2px;
}

#nav ul  li.item1 a{
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat;
}

#nav ul  li.item2 a{
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat;
}

#nav ul  li.item3 a{
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat;
    margin-top: 20px;
}

#nav ul  li.item4 a{
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat;
}

#nav ul  li.item5 a{
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat;
}

#nav ul  li:hover {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854.png') no-repeat;
    height: 155px;
}

#nav ul  li a:hover {
    color: #ffffff;
}