Горизонтальное меню MMORPG на uCoz

<!-- Site menu -->  

<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet">  
<div id="center">  
  <div id="top-menu"><!-- Site menu -->  
<nav id="nav"><ul>  
   
  <li data-id="3077" class="has-children" title="">  
  <a href="javascript:;" >Новости</a>  
  <ul><li><a href="#">Новости Black Desert</a></li><li><a href="#" target="_blank">Архив новостей</a></li><li><a href="#" target="_blank">Сообщить новость</a></li><li><a href="#" target="_blank">Официальный сайт</a></li><li><a href="#">Все новости GoHa.Ru</a></li></ul>  
  </li>  
  <li data-id="3083" class="has-children" title="">  
  <a href="javascript:;" >Об игре</a>  
  <ul><li><a href="#">Вместо вступления</a></li><li><a href="#">Как начать играть</a></li><li><a href="#">История мира</a></li><li><a href="#" title="Мир игры">Мир игры</a></li><li><a href="#">Видео</a></li><li><a href="#">Скриншоты</a></li></ul>  
  </li>  
  <li data-id="3088" class="has-children" title="">  
  <a href="javascript:;" >Классы</a>  
  <ul><li><a href="#" title="Варвар"><b>Варвар</b></a></li><li><a href="#">- Варвар: гайд для новичков</a></li><li><a href="#" title="Подробный гайд по Варвару (Johan Jazz)">- Подробный гайд по Варвару (Johan Jazz)</a></li><li><a href="#" title="Задать вопрос по Варвару ">- Задать вопрос по Варвару</a></li><li><a href="#" title="Воин"><b>Воин</b></a></li><li><a href="#" title="Подробный гайд по по Воину (конкурс)">- Подробный гайд по по Воину (Sibop)</a></li><li><a href="#" title="Задать вопрос по Воину">- Задать вопрос по Воину</a></li><li><a href="#" title="Лучница"><b>Лучница</b></a></li><li><a href="#" title="Задать вопрос по Лучнице">- Задать вопрос по Лучнице</a></li><li><a href="#" title="Колдунья"><b>Колдунья</b></a></li><li><a href="#">- Колдунья: гайд для новичков</a></li><li><a href="#" title="Подробный гайд по Кулдунье">- Подробный гайд по Колдунье</a></li><li><a href="#" title="Задать вопрос по Колдуньи">- Задать вопрос по Колдунье</a></li><li><a href="#" title="Мистик"><b>Мистик</b></a></li><li><a href="#" title="Мистик: гайд для новичков">- Мистик: гайд для новичков</a></li><li><a href="#" title="Мистик">- Подробный гайд по Мистику</a></li><li><a href="#" title="Подробный гайд о Мистику (от Yufule)">- Подробный гайд о Мистику (от Yufule)</a></li><li><a href="#" title="Задать вопрос по Мистику">- Задать вопрос по Мистику</a></li><li><a><b>Ронин</b></a></li><li><a href="#" title=" Обзор умений Ронина (Mezzmo)">- Обзор умений Ронина (Mezzmo)</a></li><li><a href="#">- Ронин и что ему носить (Mezzmo)</a></li><li><a href="#" title="Новые классы в Black Desert">Новые классы</a></li><li><a href="#" title="Видео и стримы классов">Видео и стримы классов</a></li></ul>  
  </li>  
  <li data-id="3820" class="has-children" title="">  
  <a href="javascript:;" >Основы</a>  
  <ul><li><a href="#" title="Советы бывалых игроков">Советы бывалых игроков</a></li><li><a href="#">Начинающему игроку</a></li><li><a href="#">FAQ: Вопросы новичков</a></li><li><a href="#" title="Создание персонажа">Создание персонажа</a></li><li><a href="#">Интерфейс и управление</a></li><li><a href="#" title="Игровая карта и мини-карта">Игровая карта и мини-карта</a></li><li><a href="#">Функция дружбы</a></li><li><a href="#">Характеристики персонажа</a></li><li><a href="#" title="Очки навыков и система боя">Очки навыков</a></li><li><a href="#">Экипировка персонажа</a></li><li><a href="#">Инкрустация</a></li><li><a href="#">Улучшение экипировки</a></li><li><a href="#" title="Починка экипировки">Починка экипировки</a></li><li><a href="#">Знания</a></li><li><a href="#">Общение с НИП</a></li><li><a href="#" title="Как приручить и зарегистрировать лошадь?">Приручение лошади</a></li><li><a href="#" title="Кошки, в чем их выгода? Скрещивание кошек">Петы: Кошки</a></li><li><a href="#" title="Конюшни">Конюшни</a></li><li><a href="#" title="Создание клана">Создание клана</a></li><li><a href="#" title="Квесты">Квесты</a></li><li><a href="#" title="PvP и арены">PvP, арены, система кармы</a></li><li><a href="#" title="Смерть и воскрешение">Смерть и воскрешение</a></li></ul>  
  </li>  
  <li data-id="4208" class="has-children" title="">  
  <a href="javascript:;" >Крафт</a>  
  <ul><li><a href="#" title="Склад и управление складом">Склад</a></li><li><a href="#" title="Что такое узлы? Виды узлов">Узлы</a></li><li><a href="#" title="Все о домах: виды, покупка и апгрейд. Личный дом">Домовладение</a></li><li><a href="#" title="Рабочие">Рабочие</a></li><li><a href="#" title="Обновление рабочих">Обновление рабочих</a></li><li><a href="#" title="Собирательство">Собирательство</a></li><li><a href="#" title="Рыбалка">Рыбалка</a></li><li><a href="#" title="Охота">Охота</a></li><li><a href="#" title="Фермерство (Огород)">Фермерство</a></li><li><a href="#">Обработка ресурсов</a></li><li><a href="#" title="Алхимия">Алхимия</a></li><li><a href="#" title="Кулинария">Кулинария</a></li><li><a href="#" title="Крафтовая экипировка">Костюмы для крафта</a></li><li><a href="#">Видеогайды по крафту</a></li><li><a href="#">Гайд по крафту телеги</a></li><li><a href="#" title="Порошок черного камня. Как его добыть?">Гайд по крафту порошка черного камня</a></li><li><a href="#" title="Крафт расходки на каждый день">Крафт расходки на каждый день</a></li></ul>  
  </li>  
  <li data-id="4218" class="has-children" title="">  
  <a href="javascript:;" >Руководства</a>  
  <ul><li><a href="#">Увеличение лимита веса</a></li><li><a href="#" title="Увеличение очков энергии">Увеличение очков энергии</a></li><li><a href="#" title="Гайд по прокачке параметров тела: тонус, сила, здоровье">Гайд по прокачке параметров тела</a></li><li><a href="#" title="Ежедневные задания по прокачке параметров тела">Задания для прокачке параметров тела</a></li><li><a href="#" title="Что делать с лишними вещами">Что делать с лишними вещами</a></li><li><a href="#"Биржа">Биржа</a></li><li><a href="#" title="Бафф-станции. Как их добыть и зачем они нужны?">Руководство по бафф-станциям</a></li><li><a href="#">Предметы за очки влияния</a></li><li><a href="#">Покраска экипировки</a></li><li><a href="#" title="Дойка коровы. Для чего нужно молоко?">Дойка коров</a></li><li><a href="#" title="Полезная информация о лошадях">Полезная информация о лошадях</a></li><li><a href="#" title="Советы по скрещиванию котов">Советы по скрещиванию котов</a></li><li><a href="#" title="Как и кому нужно продавать дукаты и особые итемы с мобов?">Гайд о продаже дукатов</a></li><li><a href="#" title="Варим пиво для рабочих">Варим пиво для рабочих</a></li><li><a href="#" title="Клановый функионал">Клановый функионал</a></li><li><a href="#" title="Бафы для ПвП">Бафы для ПвП</a></li><li><a href="#" title="Квест: «Сокровища пиратов»">Квест: «Сокровища пиратов»</a></li><li><a href="#" title="Титулы">Титулы</a></li></ul>  
  </li>  
  <li data-id="4235" class="has-children" title="">  
  <a href="javascript:;" >Продвинутые гайды</a>  
  <ul><li><a href="#">Видеогайд по фиолетовому сету</a></li><li><a href="#" title="Видеогайд по сету Геракла">Видеогайд по сету Геракла</a></li><li><a href="#">Заточка с помощью чёрных камней</a></li><li><a href="#">Заработок на древних монетах</a></li><li><a href="#" title="Дневные и ночные торговцы">Дневные и ночные торговцы (Контабандисты)</a></li><li><a href="#" title="Секретные торговцы Хиделя и Кальфеона">Секретные торговцы Хиделя и Кальфеона</a></li><li><a href="#" title="Прокачка на 50 уровне">Прокачка на 50 уровне</a></li><li><a href="#" title="Готовимся к Медии ч.1">Готовимся к Медии ч.1</a></li><li><a href="#" title="Готовимся к Медии ч.2 (Популярные места для фарма)">Готовимся к Медии ч.2</a></li><li><a href="#" title="Система кланов и гильдий">Система кланов и гильдий</a></li><li><a href="#" title="Войны за узлы">Войны за узлы</a></li><li><a href="#" title="Попутные способы заработка">Попутные способы заработка (Mortmorency)</a></li><li><a href="#" title="Проблемы с проточкой">Проблемы с проточкой (Mortmorency)</a></li><li><a href="#" title="Советы по пробуждению умений">Советы по пробуждению умений</a></li></ul>  
  </li>  
  <li data-id="4172" class="has-children" title="">  
  <a href="javascript:;" >Библиотека</a>  
  <ul><li><a href="#">Каталог обзоров</a></li><li><a href="#">Каталог интервью</a></li></ul>  
  </li>  
  <li data-id="3106" class="has-children" title="">  
  <a href="javascript:;" >Сообщество</a>  
  <ul><li><a href="#">Форум BDO</a></li><li><a href="#" target="_blank">Все форумы GoHa.Ru</a></li><li><a href="#">Вконтакте</a></li><li><a href="#" target="_blank">GoHa.ru Вконтакте</a></li><li><a href="#" target="_blank">Youtube</a></li><li><a href="#" target="_blank">Twitter</a></li></ul>  
  </li>  
  <li data-id="4246" title="">  
  <a href="#" >Форум</a>  
  </li>  
</ul></nav>  

<!-- /Site menu -->

#center #top-menu {  
  height: 45px;  
  padding-left: 186px;  
}  
#center #top-menu #nav {  
  color: #d1c094;  
  text-align: left;  
  height: 35px;  
  padding-top: 7px;  
}  
#center #top-menu #nav ul {  
  list-style: none;  
  margin: 0;  
  padding: 0;  
}  
#center #top-menu #nav li {  
  position: relative;  
  float: left;  
}  
#center #top-menu #nav li a {  
  display: block;  
  font: 16px/19px 'pfdin';  
  font-family: 'Ubuntu Condensed', sans-serif;  
  color: #e4cf95;  
  padding: 8px 10px;  
  text-decoration: none;  
  text-shadow: 1px 1px 1px #000;  
}  
#center #top-menu #nav li a:hover,  
#center #top-menu #nav li a.active {  
  color: #fff;  
}  
#center #top-menu #nav li.has-children > a:after {  
  content: '▼';  
  margin-left: 5px;  
  font-size: 10px;  
}  
#center #top-menu #nav li ul {  
  display: none;  
  position: absolute;  
  top: 35px;  
  left: 0;  
  width: 200px;  
  background-color: #2c2827;  
  box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.4);  
}  
#center #top-menu #nav li ul li {  
  border-top: 1px solid #121010;  
  border-bottom: 1px solid #3d3b3b;  
  float: none;  
}  
#center #top-menu #nav li ul li:first-child {  
  border-top: none;  
}  
#center #top-menu #nav li ul li:last-child {  
  border-bottom: none;  
}  
#center #top-menu #nav li ul li a {  
  padding: 1px 5px 4px 25px;  
  background: url(http://zornet.ru/Aben/Abryn/15195331.png) 5px 50% no-repeat;  
  font: 12px/19px arial;  
  font-family: 'Ubuntu Condensed', sans-serif;  
}  
#center #top-menu #nav li:hover > ul {  
  display: block;  
}  

body:before {  
  content: '';  
  position: absolute;  
  top: 1;  
  left: 0;  
  width: 100%;  
  height: 907px;  
  background: url(http://zornet.ru/Aben/Abryn/15186394.jpg) 50% 0 no-repeat;  
  z-index: -1;  
}