JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://website.16mb.com/menu-vertical_files/examples.css">
<ul class="navigation cat">
    <li><a href="#">Главная</a></li>
    <li><a href="#">HTML и CSS приемы</a></li>
    <li><a href="#">Обучение</a></li>
    <li><a href="#">HTML справочник</a></li>
</ul>

CSS

.navigation {
    background:none repeat scroll 0 0 #EAEAEA;
    list-style: none; /* прячем маркеры */
    width: 200px; /* ограничиваем ширину меню */
    margin: 30px;
} 
.navigation li {
    margin-bottom: 5px; /* делаем отступ чтобы пункты меню не сливались */
    zoom: 1; /* чтобы в IE отступ между пуктами был как у всех браузеров */ 
} 
.navigation li a {
    display: block; /* меняем отображение на блок, чтобы иметь возможность задавать внутренние отступы */
    padding: 3px 5px;
    background: #ccc;
    color: #000;
    position: relative; /* для IE6, чтобы ссылка была кликабильной по всей своей площади */ 
}
.navigation li a:hover {
    background:url("http://website.16mb.com/img/wh.gif") no-repeat scroll 10px 12px transparent;
    padding:7px 10px 7px 30px; 
    color:#fff; 
}

.cat li a:hover { background:url("http://website.16mb.com/img/bg.gif") repeat-x scroll 0 0 #B2326D; }

.cat li a { padding:7px 10px 7px 30px; background: #EAEAEA; }


.cat li a:before {
    content: '▶';
    float: left;
    margin-left: -20px;
    color: #B2326D;
    -webkit-transform: scaleX(.5);
    -moz-transform: scaleX(.5);
    -ms-transform: scaleX(.5);
    -o-transform: scaleX(.5);
    transform: scaleX(.5);
}

.cat li a:hover:before { color: #fff; }