Вертикальное цветное меню с иконками и мини профилем

<div class="meu_waak_siti">  
  <ul>  
<?if($USER_LOGGED_IN$)?>
  <li><a href="/index/8-$USER_ID$"><span><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><i></i><?endif?></span> $USERNAME$</a></li>  
  <?else?>

  <li><a href="$LOGIN_LINK$"><span><i></i> </span> Вход</a></li>
   
  <?endif?>  

  <li><a href=""><span><i class="m1"></i></span> Лента</a></li>  
  <li><a href=""><span><i class="m2"></i></span> Рекомендации</a></li>  
  <li><a href=""><span><i class="m3"></i></span> Друзья</a></li>  
  <li><a href=""><span><i class="m4"></i></span> Фото</a></li>  
  <li><a href=""><span><i class="m5"></i></span> Группы</a></li>  
  <li><a href=""><span><i class="m6"></i></span> Игры</a></li>  
  </ul>  
</div>  
<div class="meu_waak_siti meu_waak_siti2">  
  <ul>  
  <li><a href=""><span><i class="m7"></i></span> Подарки</a></li>  
  <li><a href=""><span><i class="m8"></i></span> Платежи и подписки</a></li>  
  <li><a href=""><span><i class="m9"></i></span> Заметки</a></li>  
  <li><a href=""><span><i class="m10"></i></span> Форум</a></li>  
  <li><a href=""><span><i class="m11"></i></span> Праздники</a></li>  
  <li><a href=""><span><i class="m12"></i></span> Закладки</a></li>  
  <li><a href=""><span><i class="m13"></i></span> О себе</a></li>  
  <li><a href=""><span><i class="m14"></i></span> Аукционы</a></li>  
  <li><a href=""><span><i class="m15"></i></span> Достижения</a></li>  
  <li><a href=""><span><i class="m16"></i></span> Услуги и скидки</a></li>  
  <li>  
  <a href="javascript://" onclick="$('.meu_waak_siti2').slideToggle('slow');$('.meu_waak_siti3').slideToggle('slow');"><span><i class="m18"></i></span> Закрыть</a>  
  </li>  
  </ul>  
</div>  

<div class="meu_waak_siti meu_waak_siti3">  
  <ul>  
  <li>  
  <a href="javascript://" onclick="$('.meu_waak_siti2').slideToggle('slow');$('.meu_waak_siti3').slideToggle('slow');"><span><i class="m17"></i></span> Ещё</a>  
  </li>  
  </ul>  
</div>

.meu_waak_siti ul {list-style: none;}  

.meu_waak_siti ul li a {  
  padding: 4px 5px;  
  font-size: 14px;  
  line-height: 30px;  
  display: block;  
}  

.meu_waak_siti ul li a:hover {background: #F6F6F6;}  

.meu_waak_siti ul li a span {  
  display: block;  
  width: 28px;  
  height: 28px;  
  background-color: #ADADAD;  
  border-radius: 50%;  
  margin-right: 10px;  
  float: left;  
  overflow: hidden;  
}  
.meu_waak_siti ul li a i {  
  background-image: url(img/micon.png);  
  background-position: 0 -28px;  
  background-size: 28px 560px;  
  width: 28px;  
  height: 28px;  
  display: block;  
}  

.m1 {background-position: 0 -84px!important;background-color: #86cbf6;}  
.m2 {background-position: 0 -112px!important;background-color: #ff6f81;}  
.m3 {background-position: 0 -140px!important;background-color: #f7cd40;}  
.m4 {background-position: 0 -168px!important;background-color: #ffb55a;}  
.m5 {background-position: 0 -196px!important;background-color: #aed488;}  
.m6 {background-position: 0 -224px!important;background-color: #ff8869;}  
.m7 {background-position: 0 -252px!important;background-color: #78cbc4;}  
.m8 {background-position: 0 0!important;background-color: #bb69c4;}  
.m9 {background-position: 0 -308px!important;background-color: #9ba9d7;}  
.m10 {background-position: 0 -336px!important;background-color: #f66091;}  
.m11{background-position: 0 -364px!important;background-color: #beaaa5;}  
.m12 {background-position: 0 -392px!important;background-color: #82d795;}  
.m13 {background-position: 0 -420px!important;background-color: #7d9af7;}  
.m14 {background-position: 0 -448px!important;background-color: #a488bc;}  
.m15 {background-position: 0 -476px!important;background-color: #c76b54;}  
.m16 {background-position: 0 -504px!important;background-color: #697dc4;}  
.m17 {background-position: 0 -532px!important;background-color: #ddd;}  
.m18 {background-position: 0 -532px!important;background-color: #ddd;transform: rotate(180deg);}  

.meu_waak_siti2 {display: none;}