Вертикальное меню на CSS3

<nav class="vnav">  
  <ul class="vnav-menu">  
  <li>  
  <a href="index.html" class="vnav-item">  
  <i class="icon-friends"></i>  
  Друзья  
  <span class="vnav-counter">4</span>  
  </a>  
  </li>  
  <li>  
  <a href="index.html" class="vnav-item">  
  <i class="icon-video"></i>  
  Видео  
  <span class="vnav-counter">8</span>  
  </a>  
  </li>  
  <li class="active">  
  <a href="index.html" class="vnav-item">  
  <i class="icon-photo"></i>  
  Фото  
  <span class="vnav-counter">39</span>  
  </a>  
  <ul class="vnav-subnav">  
  <li><a href="index.html">Семья <span class="vnav-counter">16</span></a></li>  
  <li><a href="index.html">Отпуск <span class="vnav-counter">23</span></a></li>  
  </ul>  
  </li>  
  <li>  
  <a href="index.html" class="vnav-item">  
  <i class="icon-podcast"></i>  
  Публикации  
  <span class="vnav-counter">42</span>  
  </a>  
  </li>  
  </ul>  
  </nav>

[class*="icon-"] {  
  display: block;  
  width: 20px;  
  height: 20px;  
  background-image: url("../img/icons.png");  
  background-repeat: no-repeat;  
  background-color: transparent;  
  border: 0;  
  color: transparent;  
  font: 0/0 a;  
  text-shadow: none;  
  }  

  .icon-friends {  
  background-position: 0 0;  
  }  

  .icon-video {  
  background-position: -20px 0;  
  }  

  .icon-photo {  
  background-position: -40px 0;  
  }  

  .icon-podcast {  
  background-position: -60px 0;  
  }  

  .vnav {  
  width: 200px;  
  overflow: hidden;  
  background: #fff;  
  border: 1px solid #1d1f22;  
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);  
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);  
  }  
  .vnav a {  
  display: block;  
  line-height: 34px;  
  text-decoration: none;  
  }  
  .vnav li:last-child .vnav-item {  
  border-bottom-color: #50575f;  
  }  
  .vnav li:last-child .vnav-subnav {  
  border-bottom-color: #fff;  
  }  

  .vnav-item {  
  position: relative;  
  padding: 0 12px 0 37px;  
  color: #fff;  
  font-size: 13px;  
  text-shadow: 0 1px rgba(0, 0, 0, 0.35);  
  border-top: 1px solid #878e96;  
  border-bottom: 1px solid #333740;  
  background-color: #505968;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #707a84), color-stop(100%, #505968));  
  background-image: -webkit-linear-gradient(top, #707a84, #505968);  
  background-image: -moz-linear-gradient(top, #707a84, #505968);  
  background-image: -ms-linear-gradient(top, #707a84, #505968);  
  background-image: -o-linear-gradient(top, #707a84, #505968);  
  background-image: linear-gradient(top, #707a84, #505968);  
  -webkit-transition: opacity 0.15s;  
  -moz-transition: opacity 0.15s;  
  -ms-transition: opacity 0.15s;  
  -o-transition: opacity 0.15s;  
  transition: opacity 0.15s;  
  }  
  .vnav-item:hover {  
  opacity: .95;  
  }  
  .active .vnav-item, .vnav-item:active {  
  opacity: 1;  
  border-top-color: #6ad2ef;  
  border-bottom-color: #1c638f;  
  -webkit-box-shadow: 0 1px #bbbbbb, 0 2px #e9ebe8;  
  box-shadow: 0 1px #bbbbbb, 0 2px #e9ebe8;  
  background-color: #259bdb;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #44c5ec), color-stop(100%, #259bdb));  
  background-image: -webkit-linear-gradient(top, #44c5ec, #259bdb);  
  background-image: -moz-linear-gradient(top, #44c5ec, #259bdb);  
  background-image: -ms-linear-gradient(top, #44c5ec, #259bdb);  
  background-image: -o-linear-gradient(top, #44c5ec, #259bdb);  
  background-image: linear-gradient(top, #44c5ec, #259bdb);  
  }  
  .active .vnav-item .vnav-counter, .vnav-item:active .vnav-counter {  
  background: #2471a9;  
  }  
  .vnav-item i {  
  position: absolute;  
  top: 7px;  
  left: 9px;  
  }  

  .vnav-counter {  
  float: right;  
  margin-top: 8px;  
  padding: 0 6px;  
  line-height: 18px;  
  font-size: 11px;  
  background: #464e59;  
  border-radius: 9px;  
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);  
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);  
  }  

  .vnav-subnav {  
  display: none;  
  border-bottom: 1px solid #404348;  
  }  
  .active .vnav-subnav {  
  display: block;  
  }  
  .vnav-subnav a {  
  padding: 0 12px 0 16px;  
  font-size: 12px;  
  color: #838a90;  
  border-bottom: 1px solid #eee;  
  }  
  .vnav-subnav a:before {  
  content: '';  
  display: inline-block;  
  width: 0;  
  height: 0;  
  margin-right: 8px;  
  border: 4px outset transparent;  
  border-left: 4px solid #bbb;  
  }  
  .vnav-subnav a:hover {  
  background: #f8f9fb;  
  }  
  .vnav-subnav .vnav-counter {  
  color: #999;  
  background: #fcfcfc;  
  -webkit-box-shadow: inset 0 0 0 1px #dcdcdc;  
  box-shadow: inset 0 0 0 1px #dcdcdc;  
  }  
  .vnav-subnav li:last-child a {  
  border-bottom-color: #fff;  
  }