<div id='cssmenu'>  
  <ul>  
  <li class='active'><a href='/'><span>მთავარი</span></a></li>  
  <li class='has-sub'><a href='#'><span>ფაილების კატალოგი</span></a>  
  <ul>  
  <li><a href='#'><span>უცოზ დიზაინები</span></a></li>  
  <li><a href='#'><span>უცოზ სკრიპტები</span></a></li>  
  <li ><a href='#'><span>უცოზ ჰაკები</span></a></li>  
  </ul>  
  </li>  
  <li class='has-sub'><a href='#'><span>საიტის სიახლეები</span></a>  
  <ul>  
  <li><a href='#'><span>თამაშები</span></a></li>  
  <li><a href='#'><span>პროგრამები</span></a></li>  
  <li><a href='#'><span>ვინდოუსები</span></a></li>  
  <li><a href='#'><span>geoload.in</span></a></li>  
  </ul>  
  </li>  
  <li class='has-sub'><a href='#'><span>ადმინისტრაცია</span></a>  
  <ul>  
  <li><a href='#'><span>კონტაქტი</span></a></li>  
  <li><a href='#'><span>განცხადება</span></a></li>  
  <li ><a href='#'><span>ჩვენს შესახებ</span></a></li>  
  </ul>  
  </li>  
  <li><a href='#'><span>კავშირი</span></a></li>  
  </ul>  
</div>

#cssmenu,  
#cssmenu ul,  
#cssmenu li,  
#cssmenu a {  
  margin: 0;  
  padding: 0;  
  border: 0;  
  list-style: none;  
  font-weight: normal;  
  text-decoration: none;  
  line-height: 1;  
  font-family: 'font-2';
  font-size: 14px;  
  position: relative;  
}  
#cssmenu a {  
  line-height: 1.3;  
}  
#cssmenu {  
  width: 250px;  
}  
#cssmenu > ul > li > a {  
  padding-right: 40px;  
  font-size: 25px;  
  font-weight: bold;  
  display: block;  
  background: #bd0e36;  
  color: #ffffff;  
  border-bottom: 1px solid #5e071b;  
  text-transform: uppercase;  
}  
#cssmenu > ul > li > a > span {  
  background: #ed1144;  
  padding: 10px;  
  display: block;  
  font-size: 13px;  
  font-weight: 300;  
}  
#cssmenu > ul > li > a:hover {  
  text-decoration: none;  
}  
#cssmenu > ul > li.active {  
  border-bottom: none;  
}  
#cssmenu > ul > li.active > a {  
  color: #fff;  
}  
#cssmenu > ul > li.active > a span {  
  background: #bd0e36;  
}  
#cssmenu span.cnt {  
  position: absolute;  
  top: 8px;  
  right: 15px;  
  padding: 0;  
  margin: 0;  
  background: none;  
}  
/* Sub menu */  
#cssmenu ul ul {  
  display: none;  
}  
#cssmenu ul ul li {  
  border: 1px solid #e0e0e0;  
  border-top: 0;  
}  
#cssmenu ul ul a {  
  padding: 10px;  
  display: block;  
  color: #ed1144;  
  font-size: 13px;  
}  
#cssmenu ul ul a:hover {  
  color: #bd0e36;  
}  
#cssmenu ul ul li.odd {  
  background: #f4f4f4;  
}  
#cssmenu ul ul li.even {  
  background: #fff;  
}

<script type="text/javascript">  
  $(document).ready(function () {  
  $('#cssmenu > ul > li ul').each(function(index, e){  
  var count = $(e).find('li').length;  
  var content = '<span class=\"cnt\">' + count + '</span>';  
  $(e).closest('li').children('a').append(content);  
  });  
  $('#cssmenu ul ul li:odd').addClass('odd');  
  $('#cssmenu ul ul li:even').addClass('even');  
  $('#cssmenu > ul > li > a').click(function() {  
  $('#cssmenu li').removeClass('active');  
  $(this).closest('li').addClass('active');  
  var checkElement = $(this).next();  
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {  
  $(this).closest('li').removeClass('active');  
  checkElement.slideUp('normal');  
  }  
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {  
  $('#cssmenu ul ul:visible').slideUp('normal');  
  checkElement.slideDown('normal');  
  }  
  if($(this).closest('li').find('ul').children().length == 0) {  
  return true;  
  } else {  
  return false;  
  }  
  });  
});
  </script>