Как сделать вертикальное меню выпадающим?

<div class="block">
 <div class="dcont">
  <div class="inside">
   <div class="vote-title clr_black">Навигация</div>
     
    <ul class="bnav">
    
    
     <li><a href="http://vayarena.ru/"><img src="/templates/IGame/images/rightmenu/glavnaya.png"><span>Главная</span></a></li>
      
      <li><a target="_blank" href="http://vayarena.ru/forum/"><img src="/templates/IGame/images/rightmenu/forum.png"><span>Форум</span></a></li>
      
      <li>
        <a href="#" class="collapsed collapsible"><img src="/templates/IGame/images/rightmenu/novosti.png"><span>Новости</span><i class="arrow arr_down"></i><i class="arrow arr_up"></i></a>
        <ul style="display: none;">
          <li><a href="#">Новости киберспорта</a></li>
          <li><a href="#">Железные новости</a></li> 
          <li><a href="#">Новости портала</a></li>
          <li><a href="#">Новости сервера cs 1.6</a></li> 
        </ul>
      </li>
      
      
      
      <li>
        <a href="#" class="collapsed collapsible"><img src="/templates/IGame/images/rightmenu/obzor.png"><span>Обзоры</span><i class="arrow arr_down"></i><i class="arrow arr_up"></i></a>
        <ul style="display: none;">
          <li><a href="http://vayarena.ru/">Игры и описание</a></li>
          <li><a href="http://vayarena.ru/">Counter-Strike</a></li> 
          <li><a href="http://vayarena.ru/">Авторские статьи</a></li>
          <li><a href="http://vayarena.ru/">Информация</a></li>
        </ul>
      </li>
      
        <li>
        <a href="#" class="collapsed collapsible"><img src="/uploads/posts/2014-02/1393426876_06-steam.png"><span>STEAM</span><i class="arrow arr_down"></i><i class="arrow arr_up"></i></a>
        <ul style="display: none;">
          <li><a href="http://vayarena.ru/">КУПИТЬ STEAM</a></li>
          <li><a href="http://vayarena.ru/">Скачать Steam</a></li> 
          <li><a href="http://vayarena.ru/">Установить Steam</a></li>
          <li><a href="http://vayarena.ru/obzory/">Установить CS 1.6</a></li>
        </ul>
      </li>

        <li>
            <a href="#" class="collapsed collapsible"><img src="/uploads/posts/2014-04/1396364519_install.png"><span>Установка</span><i class="arrow arr_down"></i><i class="arrow arr_up"></i></a>
        <ul style="display: none;">
          <li><a href="http://vayarena.ru/">Установка конфига CS 1.6</a></li> 
          <li><a href="http://vayarena.ru/">Установка плагина CS 1.6</a></li>   
          <li><a href="http://vayarena.ru/">Установка моделей CS 1.6</a></li> 
          <li><a href="http://vayarena.ru/">Установка карт CS 1.6</a></li>
          <li><a href="http://vayarena.ru/">Установка CS 1.6 [Steam]</a></li>
          <li><a href="http://vayarena.ru/">Установка сервера на [VPS и VDS]</a></li>                  
        </ul>
      </li>
        
    </ul>
  </div>
 </div>
</div>

/*==Right menu==*/
.sidebar .block{
background: url('../images/rightmenu/block.png');
  width: 279px;
  border: 1px solid #373a3a;
  float: left;
  position: relative;
  border-radius: 2px;
  margin-bottom: 13px;
}
.sidebar .dcont {
  padding: 0px 10px 10px 10px;
}
.sidebar .vote-title.clr_black {
  color: #000;
}
.sidebar .vote-title {
  background: #ffb500;
  padding: 10px;
  text-transform: uppercase;
  margin: 0px -10px 0px -10px;
  color: #fff;
}
.sidebar .block ul.bnav li {
  margin: 0;
  border-top: 1px solid #000;
}
.sidebar .block ul li a {
  color: #c8c8c8;
  display: block;
  padding: 10px;
  background: #2b2b2b;
}
.sidebar .block ul li {
  margin-bottom: 1px;
  text-transform: uppercase;
  display: block;
}
.sidebar .block ul.bnav {
  padding: 10px 0 0 0;
}
.sidebar .block ul.bnav li:first-child {
  border: 0;
}
.bnav a {
  font-size: 11px;
}
.bnav a {
  position: relative;
}
.bnav a img {
  width: 16px;
  height: 16px;
  position: relative;
  top: -2px;
  margin: 0 5px 0 0;
}
.bnav a img, .bnav a span {
  display: inline-block;
  vertical-align: middle;
}
.bnav .arrow {
  width: 16px;
  height: 16px;
  line-height: 10px;
  position: absolute;
  right: 5px;
  top: 50%;
  margin: -8px 0 0 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
  background: url(../images/rightmenu/plusminus.png) no-repeat 0 0;
}
.bnav .arrow.arr_up {
  display: none;
}
.sidebar .block a {
  color: #ccc;
}
.sidebar .block ul.bnav ul {
  padding: 2px 16px 1px 16px;
}
.sidebar .block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-bottom: 10px;
}