Красивое "Анимированное меню" для uCoz

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">  
<div id="hornav">  
<ul class="menu" id="moomenu">  
<li class="item-677">  
<a href="http://zornet.ru/">скрипты для юкоз</a></li><li class="item-658">  
<a href="http://zornet.ru/">News</a></li><li class="item-629 deeper parent">  
<a href="http://zornet.ru/load/81">Media</a><ul><li class="item-633">  
  <a href="http://zornet.ru/news/">Screenshots</a></li><li class="item-668">  
  <a href="#">Concept art</a></li><li class="item-669">  
  <a href="#">Video</a></li></ul></li><li class="item-518 deeper parent">  
<a href="#">About</a><ul><li class="item-670">  
  <a href="#">Scorn</a></li><li class="item-671">  
  <a href="#">Ebb Software</a></li><li class="item-676">  
  <a href="#">FAQ</a></li></ul></li><li class="item-682">  
<a href="#">Wiki</a></li><li class="item-681">  
<a href="#">PRESSKIT</a></li><li class="item-647">  
<a href="#">Contact</a></li></ul>  
</div>

#hornav {  
  font-family: 'Oswald', sans-serif;  
  border:1px solid transparent;  
  clear: both;  
  height: 45px;  
  top: -1px;  
  z-index: 2000;  
}  

#hornav > ul {  
  padding: 0;  
  margin:8px 0px 0px 0px;  
  text-align: center;  
}  

#hornav > ul > li a{  
  padding: 24px 14px;  
  margin: 0;  
  list-style: none outside none;  
  line-height: 1.8em;  
  letter-spacing: 0.5px;  
  font-weight: 300;  
  font-size: 16px;  
  text-transform: uppercase;  
  text-decoration: none;  
  cursor: pointer;  
}  

#hornav > ul > li > a:hover, #hornav > ul > li > a:focus, #hornav > ul > li > a:active{  
  text-decoration: none;  
}  

#hornav ul li {  
  display: inline-block;  
  position: relative;  
}  

#hornav ul li ul {  
}  

#hornav ul ul {  
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  -ms-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  -o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  display: block;  
  list-style: none;  
  margin-top: -5px;  
  padding: 5px 0 !important;  
  min-width: 260px;  
  z-index: 1000;  
}  

#hornav ul ul li {  
  min-height: 22px;  
  text-align: left; /*required to position li's when menu centered */  
  width: 100%; /*required to position li's when menu centered */  
}  

#hornav ul ul li a {  
  display: block;  
  padding: 10px 15px;  
  text-transform: capitalize;  
  font-size: 14px;  
  border: none !important;  
  border-radius: 0px !important;  
  margin-left: 0px !important;  

}  

#hornav ul ul li a:active,  
#hornav ul ul li a:focus,  
#hornav ul ul li a:hover {  
  text-decoration: none;  
  border: none !important;  
  border-radius: 0px !important;  
  margin-left: 0px !important;  

}  

#hornav ul ul li:first-child {  
  border-top: none;  
}  

#hornav ul ul li:hover a {  
  text-decoration: none;  
}  

#hornav ul ul ul:before {  
  display: none;  
}  

#hornav ul ul:before {  
  background: transparent url('http://zornet.ru/Aben/Aben-Abag/16469106.png') no-repeat 0 0;  
  content: "";  
  display: block;  
  height: 10px;  
  left: 26px;  
  position: absolute;  
  top: -10px;  
  width: 14px;  
}  

#hornav li ul,  
#hornav li ul li ul {  
  position: absolute;  
  height: auto;  
  min-width: 260px;  
  opacity: 0.8;  
  visibility: hidden;  
  transition: all 300ms linear;  
  -o-transition: all 300ms linear;  
  -ms-transition: all 300ms linear;  
  -moz-transition: all 300ms linear;  
  -webkit-transition: all 300ms linear;  
  top: 92px;  
  z-index: 4000;  
}  

#hornav li:hover > ul,  
#hornav li ul li:hover > ul {  
  display: block;  
  opacity: 0.8;  
  visibility: visible;  
  top: 48px;  
}  

#hornav li:hover > ul,  
#hornav li ul li:hover > ul {  
  -webkit-transition: opacity 300ms linear;  
}  

#hornav li ul li ul {  
  left: 230px;  
  top: 0;  
}  

#hornav li ul li:hover > ul {  
  top: 0px;  
  left: 260px;  
}