Прозрачное горизонтальное меню на uCoz

<div class="menuba">  
<div class="wrapper">  
<div class="cats-box">  

<ul id="nav7">  
  <li><a href="/" title="Главная страница"><i class="fa fa-home" aria-hidden="true"></i></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="Узнать больше">Ещё <i class="fa fa-caret-down" aria-hidden="true"></i></a>  
   
<ul>  
  <li class="navzzz"><a href="#" title="Даты выхода игр на ПК">Даты выхода игр</a> </li>  
  <li class="navzzz"><a href="#" title="Игры которые еще не вышли">Скоро на сайте</a> </li>  
  <li class="navzzz"><a href="#" title="Рейтинг игр">ТОП 100 Игр</a> </li>  
  <li class="navzzz"><a href="#" title="Связь с администрацией">Контакты</a> </li>  
  <li class="navzzz"><a href="#" title="Часто задаваемые вопросы">FAQ</a> </li>  
  <li class="navzzz"><a href="#" title="Правила сайта">Правила сайта</a></li>  
  <li class="navzzz"><a href="#" title="Информация о сайте">О нас</a> </li>  
</ul>  
</li>  
</ul>  
   
<div class="float_right">  
  <div class="navi">  
  <div class="navi-menu">  
  <div style="margin-top:13px;">  
<script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>  
<script src="https://yastatic.net/share2/share.js"></script>  
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,gplus" data-counter=""></div>  
  </div>  
  </div>  
  </div>  
  </div>

@charset "utf-8";  
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,700,400,600);  
@import url(http://fonts.googleapis.com/css?family=Russo+One:300,700,400,600);  
@import url(http://fonts.googleapis.com/css?family=Comfortaa:300,700,400,600);  
@import url(/css/animate.css);  
@import url(/css/font-awesome.css);  
::-webkit-scrollbar-track{background-color: #f5f8fa;webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9)}::-webkit-scrollbar{height: 8px;width: 8px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px}::-webkit-scrollbar-thumb{background-color: #ccc;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px}*{box-sizing: border-box;moz-box-sizing: border-box;o-box-sizing: border-box}html,body{height: 100%}@-webkit-keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}@-moz-keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}@-o-keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}@keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}  

.menuba {  
  background-color: rgba(0, 0, 0, 0.55);  
  height: 50px;  
}  
.wrapper {  
  max-width: 1160px;  
  width: 100%;  
  margin: 0 auto;  
  position: relative;  
}  
.cats-box .navi-button, .navi-button:hover {color:#fff; font-weight:normal; display:inline-block;position:relative;line-height:35px;padding-right: 15px;padding-left: 15px;text-decoration:none}  

.cats-box {  
  padding: 5px 8px 0px 8px;  
  height: 50px;  
  line-height: 50px;  
  position: relative;  
  width: 100%;  
  display: table;  
  margin-bottom: 0px;  
  border-top-right-radius: 4px;  
  border-top-left-radius: 4px;  
}  

.cats-box .float_right {  
  right: 5px;  
  top:0px;  
  position: absolute;  
}  

.cats-box a {  
  font-size:15px;  
  color: white;  
  text-shadow: 1px 1px 1px #212121;  
}  

.cats-box a:hover {  
  color: #C94C4E;  
  text-shadow: 1px 1px 1px #212121;  
}  

#nav7, #nav7 ul, #nav7 li {  
  margin: 0;  
  padding: 0 10px;  
}  

#nav7 {  
  position: relative;  
  display: table;  
  margin-left: -20px;  
}  
#nav7 ul {  
  position: absolute;  
  z-index: 5;  
  display: none;  
}  
#nav7 li:hover ul {  
  display: block;  
}  
#nav7 li {  
  display: table-cell;  
  text-align: center;  
}  
#nav7 ul li {  
  display: block;  
  text-align: left;  
}  
#nav7 .right {  
  direction: rtl;  
}  
#nav7 .right ul {  
  right: 0;  
}  
#nav7 .right li {  
  direction: ltr;  
}  
#nav7 a {  
  display: block;  
  color: #fff;  
  text-decoration: none;  
  font-family: 'Russo One', Verdana, sans-serif;  
  line-height: 42px;  
}  
#nav7 ul a {  
  padding: 3px 15px;  
}  

#nav7 li:hover {  
  background: rgba(56, 56, 56, 0.56);  
}  

.navzzz {  
  background: rgba(39, 39, 39, 0.93);  
  width: 100%!important;  
  min-width: 200px!important;  
  box-shadow: 0 8px 35px rgba(0,0,0,0.1);  
  padding: 0;  
}  

.navi {  
  margin-top:1px;  
  float:right;  
  position:relative;  
}  

.navi-button,.navi-button:hover {  
  position:relative;  
  line-height:40px;  
  text-decoration:none;  
  font-size: 15px; font-family: 'Russo One', Verdana, sans-serif;  
  cursor <img src="/.s/sm/23/tongue.gif" border="0" align="absmiddle" alt="tongue" /> ointer;  
}  

.navi-button i.fa {  
  font-size:13px;  
  padding-left:8px;  
}  

.navi-avatar,.navi-avatar img {  
  -webkit-border-radius:100px;  
  -moz-border-radius:100px;  
  border-radius:100px;  
}  

.navi-avatar {  
  margin-right:8px;  
  width:40px;  
  height:40px;  
  border-radius:40px;  
}  

.navi-avatar img {  
  margin-right: 8px;  
  width: 40px;  
  float: left;  
  height: 40px;  
  object-fit: cover;  
  border: 1px solid #325677;  
}  

.navi-menu:hover .navi-list {  
  visibility:visible;  
}  

.navi-list {  
  position:absolute;  
  min-width:230px;  
  max-width:400px;  
  right:0!important;  
  top:28px;  
  padding-top:18px;  
  visibility:hidden;  
  z-index:8;  
}  

.navi-list-in {  
  background:rgb(48, 55, 60);  
  width:100%!important;  
  max-width:400px!important;  
  box-shadow:0 8px 35px rgba(0,0,0,0.1);  
  -webkit-border-radius:3px;  
  -moz-border-radius:3px;  
  border-radius:3px;  
  padding:3px 0;  
}  

.navi-list-in a {  
  display:block;  
  line-height:42px!important;  
  text-decoration:none;  
  text-align:left;  
  border-bottom: 1px solid #495156;  
  padding:0 20px!important;  
}  

.navi-list-in a.last {  
  border-bottom:0!important;  
}  

.navi-menu:hover .navi-list {  
  visibility:visible;  
}