Вертикальное меню с анимацией на CSS

[Severniy]

Красивое вертикальное меню на CSS с анимацией при на ведении.

CSS

menu_vert{ 
  float: none;  
  clear: both; 
  width: 29%;  
  margin: 5% auto; 
  background: #e8e5e5; 
} 

menu_vert ul { 
  list-style: none; 
  margin: 0px; 
  padding: 0px; 
} 

menu_vert li{ 
  float: none;  
  width: 100%; 
} 

menu_vert li a { 
  display: block; 
  width: 100%; 
  padding: 18px; 
  border-left: 4px solid; 
  position: relative; 
  z-index: 3; 
  text-decoration: none; 
  color: #383333; 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  font-size: 16px; 
  font-weight: bold; 
} 
   
menu_vert li a:hover{ border-bottom: 0px; color: #f3eded;} 
menu_vert li:first-child a{ border-left: 8px solid #2782bf; } 
menu_vert li:nth-child(2) a{ border-left: 8px solid #19800d; } 
menu_vert li:nth-child(3) a{ border-left: 8px solid #ad473e; } 
menu_vert li:last-child a{ border-left: 8px solid #128c74; } 

menu_vert li a:after {  
  content: ""; 
  height: 100%;  
  left: 0;  
  top: 0;  
  width: 0px;  
  position: absolute;  
  transition: all 0.7s ease 0s;  
  -webkit-transition: all 0.7s ease 0s;  
  z-index: -1; 
} 

menu_vert li a:hover:after{ width: 100%; } 
menu_vert li:first-child a:after{ background: #2782bf; } 
menu_vert li:nth-child(2) a:after{ background: #19800d } 
menu_vert li:nth-child(3) a:after{ background: #ad473e; } 
menu_vert li:last-child a:after{ background: #128c74; }

HTML

<menu_vert> 
  <ul> 
  <li><a href="https://www.hostland.ru/?r=835bfe25">хостинг</a></li>
<li><a href="https://www.hostland.ru/order/hosting/?r=835bfe25">Заказать хостинг</a></li>
<li><a href="https://www.hostland.ru/services/domain/?r=835bfe25">Регистрация доменов</a></li>
<li><a href="https://www.hostland.ru/services/hosting/?r=835bfe25">Тарифы на хостинг</a></li> 
  </ul> 
</menu_vert>