Красивое горизонтальное меню

<!-- <menu> -->
  <div id="topmenu">
  <div class="menubar">
  <ul id="topmenu" class="top-panel reset">
  <li><a href="$HOME_PAGE_LINK$">Главная</a></li>
   
  <li class="sublnk"><a href="http://infoscript.ru/index/8-1392">Рип от Voker'a</a>
  <ul>
  <li><a href="/">Скрипты</a></li>
  <li><a href="/">Шаблоны</a></li>
  <li><a href="/">Активный форум</a></li>
  <li><a href="/">Команда сайта</a></li>
  <li><a href="http://infoscript.ru/">Infoscript.ru</a></li>
  </ul>
  </li>
   
  <li class="sublnk"><a href="#">Каталог игр</a>
  <ul>
  <li><a href="/">Игры для PC</a></li>
  <li><a href="/">Игры для Xbox 360</a></li>
  <li><a href="/">Игры для PS3</a></li>
  <li><a href="/">Игры для PSP</a></li>
  </ul>
  </li>
   
  <li><a href="#">Игры для PC</a></li>
  <li><a href="#">Игры для Xbox 360</a></li>
  </ul>
  </div>
</div>
<!-- </menu> -->

#topmenu {
  background:url('/menu/highlight.png') repeat-x #f5f5f5;
  height:32px;
}

.top-panel {
  line-height:32px;
  float:left;
}

.top-panel li {
  float:left;
}

.top-panel li a {
  color:#666;
  text-shadow:#fff 0px 1px 0px
  float:left;
  border-right:1px dotted #ddd;
  padding:0 10px;
  display:block;
}

.top-panel li a:hover {
  color:#a8cc37;
}

.menubar ul .sublnk {
  position: relative;
}

.menubar ul li ul {
  width:200px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);
  margin:0;
  padding:5px 0px;
  border-radius:4px;
  background:rgba(0,0,0,0.8);
  left:0;
  position:absolute;
  z-index:9999;
  display:none;
}

.menubar ul li ul li a, .menubar ul li ul li, .menubar ul li ul li a {
  background: none;
  float: none;
  border:none;
  height: auto;
  display: block;
  line-height: normal;
  text-transform: none;
}

.menubar ul li ul li a {
  color: #fff;
  font-size:11px;
  padding:5px 0 5px 7px;
}
   
.menubar ul li ul li {
  padding: 0;
}

.menubar ul li ul li a:hover {
  color:#fff;
  background:rgba(255,255,255,0.15);  
}

.reset {
  list-style:none;
}

<script type="text/javascript" src="/menu/libs.js"/>