JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg-menu">
    <div class="bg-menu-title">
        <div class="title-class">Меню сайта</div>
    </div>
    <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>
        <li><a href="">Главная</a></li>
    </ul>
</div>

CSS

.bg-menu {
   background: url(http://savepic.su/3495657.png) repeat-y;
   position: relative;
   width:181px;
   margin:43px 20px 11px;
   padding:5px;
}
.bg-menu:before, .bg-menu:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;    
}
.bg-menu:after {
    background: url(http://savepic.su/3488489.png) no-repeat;
    height:11px;
    bottom: -11px;
}
.bg-menu:before {
    background: url(http://savepic.su/3477225.png) no-repeat;
    height:33px;
    top:-33px;
}
.bg-menu-title {
	background:url(http://savepic.su/3479273.png) no-repeat; 
	width:187px; 
	height:33px;
	position:absolute;
	top:-40px;
	left:2px;
	}
.title-class {
    color:#FFF;
    text-align: center;
    font-size:13px;
    padding-top:7px;
}
.bg-menu ul {
    margin:0; 
    padding:0;
    text-align: center;
}
.bg-menu ul li {
    padding-top: 2px;
    list-style:none;
    background: url(http://savepic.su/3483363.png) top center no-repeat;/*<--insert here*/
}

.bg-menu ul li:first-child {
    padding-top: 0;
    list-style:none;
    background: none;
}

.bg-menu ul li a {
    display: block; /* <-- NEED */
    color:#FFF;
    text-decoration:none;
    text-align: left;
    font-size:13px;
    font-weight: normal;
    text-shadow: 0 1px 1px rgb(0, 0, 0);
    height:27px;
    line-height: 24px;
    margin:0 0 -2px;
    padding: 0 20px;
}
.bg-menu ul li a:hover {
    background: url(http://savepic.su/3531488.png) no-repeat;
    margin:0 -9px -2px; 
    text-indent: 9px;
    color: rgba(70, 161, 200, 1);
}