1).
/* Some stylesheet reset */  
#cssmenu > ul {  
  list-style: none;  
  margin: 0;  
  padding: 0;  
  vertical-align: baseline;  
  line-height: 1;  
}  

/* The container */  
#cssmenu > ul {  
  display: block;  
  position: relative;  
  width: 150px;  
}  

  /* The list elements which contain the links */  
  #cssmenu > ul li {  
  display: block;  
  position: relative;  
  margin: 0;  
  padding: 0;  
  width: 150px;  
  }  

  /* General link styling */  
  #cssmenu > ul li a {  
  /* Layout */  
  display: block;  
  position: relative;  
  margin: 0;  
  border-top: 1px dotted #3a3a3a;  
  border-bottom: 1px dotted #1b1b1b;  
  padding: 7px 20px;  
  width: 160px;  

  /* Typography */  
  font-family: Helvetica, Arial, sans-serif;  
  color: #d8d8d8;  
  text-decoration: none;  
  text-transform: uppercase;  
  text-shadow: 0 1px 1px #000;  
  font-size: 12px;  
  font-weight: 300;  

  /* Background & effects */  
  background: #282828;  
  }  

  /* Rounded corners for the first link of the menu/submenus */  
  #cssmenu > ul li:first-child>a {  
  border-top-left-radius: 0px;  
  border-top-right-radius: 0px;  
  border-top: 0;  
  }  

  /* Rounded corners for the last link of the menu/submenus */  
  #cssmenu > ul li:last-child>a {  
  border-bottom-left-radius: 4px;  
  border-bottom-right-radius: 4px;  
  border-bottom: 0;  
  }  

  /* The hover state of the menu/submenu links */  
  #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {  
  color: #fff;  
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);  
  background: #f23f37;  
  background: -webkit-linear-gradient(bottom, #f23f37, #f45d57);  
  background: -ms-linear-gradient(bottom, #f23f37, #f45d57);  
  background: -moz-linear-gradient(bottom, #f23f37, #f45d57);  
  background: -o-linear-gradient(bottom, #f23f37, #f45d57);  
  border-color: transparent;  
  }  

  /* The arrow indicating a submenu */  
  #cssmenu > ul .has-sub>a::after {  
  content: '';  
  position: absolute;  
  top: 16px;  
  right: 10px;  
  width: 0px;  
  height: 0px;  

  /* Creating the arrow using borders */  
  border: 4px solid transparent;  
  border-left: 4px solid #d8d8d8;  
  }  

  /* The same arrow, but with a darker color, to create the shadow effect */  
  #cssmenu > ul .has-sub>a::before {  
  content: '';  
  position: absolute;  
  top: 17px;  
  right: 10px;  
  width: 0px;  
  height: 0px;  

  /* Creating the arrow using borders */  
  border: 4px solid transparent;  
  border-left: 4px solid #000;  
  }  

  /* Changing the color of the arrow on hover */  
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {  
  border-left: 4px solid #fff;  
  }  

  #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {  
  border-left: 4px solid rgba(0, 0, 0, .3);  
  }  

   
  /* THE SUBMENUS */  
  #cssmenu > ul ul {  
  position: absolute;  
  left: 201px;  
  top: -9999px;  
  padding-left: 5px;  
  opacity: 0;  
  /* The fade effect, created using an opacity transition */  
  -webkit-transition: opacity .3s ease-in;  
  -moz-transition: opacity .3s ease-in;  
  -o-transition: opacity .3s ease-in;  
  -ms-transition: opacity .3s ease-in;  
  }  

  /* Showing the submenu when the user is hovering the parent link */  
  #cssmenu > ul li:hover>ul {  
  top: 0px;  
  opacity: 1;

2).
<div id='cssmenu'>  
<ul>  
  <li><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>  
  <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>კატეგორია</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>  

  </ul>  
  </li>  
  <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>კატეგორია</span></a></li>  
  <li><a href='skype:guga11114'><span>კატეგორია</span></a></li>  
  <li><a href='http://masterucoz.in/'><span>კატეგორია</span></a></li>  
</ul>  
</div>  
  </ul>  
</div>