JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<ul>
<li ><a href="#" id="main"title="Главная">Главная</a></li>
<li><a href="#" id="link1" title="Ссылка 1">Ссылка 1</a></li>
<li><a href="#" id="link2" title="Ссылка 2">Ссылка 2</a></li>
<li><a href="#" id="link3" title="Ссылка 3">Ссылка 3</a></li>
<li><a href="#" id="link4" title="Ссылка 4">Ссылка 4</a></li>
<li><a href="#" id="link5" title="Ссылка 5">Ссылка 5</a></li>
</ul>

CSS

ul { 
    position: absolute; 
list-style-type: none;
width:70px;
height:360px;
}

li {float:left;
}
a {
display: block; 
height:60px;
width:150px; 
background:url(vert_menu.png) no-repeat;
}
 a#main {background-position: 0 0;}
a#main:hover { background-position: -150px 0; }
a#link1 {background-position: 0 -60px;}
a#link1:hover { background-position: -150px -60px;}
a#link2 {background-position: 0 -120px;}
a#link2:hover { background-position: -150px -120px; }
a#link3 {background-position: 0 -180px;}
a#link3:hover { background-position: -150px -180px; }
a#link4 {background-position: 0 -240px;}
a#link4:hover { background-position: -150px -240px;}
a#link5 {background-position: 0 -300px;}
a#link5:hover { background-position: -150px -300px; }