<div id="masteru" class="en">  
<ul>  
<li>  
<a href="http://Master-uCoz.RU" hidefocus="true" style="outline: none;">  
<i class="fa fa-home"></i>  
<span>Master-uCoz.RU</span>  
</a>  
</li>  
<li>  
<a href="/news/" hidefocus="true" style="outline: none;">  
<i class="fa fa-file-text"></i>  
<span>Новости</span>  
</a>  
</li>  
<li>  
<a href="/photo/" hidefocus="true" style="outline: none;">  
<i class="fa fa-camera"></i>  
<span>Фотографии</span>  
</a>  
</li>  
<li>  
<a href="/load/" hidefocus="true" style="outline: none;">  
<i class="fa fa-download"></i>  
<span>Файлы</span>  
</a>  
</li>  
<li>  
<a href="/index/0-3" hidefocus="true" style="outline: none;">  
<i class="fa fa-envelope"></i>  
<span>Контакты</span>  
</a>  
</li>  
<li>  
<a href="/video/" hidefocus="true" style="outline: none;">  
<i class="fa fa-video-camera"></i>  
<span>Видео</span>  
</a>  
</li>  
<li>  
<a href="/faq/" hidefocus="true" style="outline: none;">  
<i class="fa fa-comments-o"></i>  
<span>FAQ</span>  
</a>  
</li>  
<li>  
<a href="/news/rss" hidefocus="true" style="outline: none;">  
<i class="fa fa-rss"></i>  
<span>RSS</span>  
</a>  
</li>  
<li>  
<a href="/forum/" hidefocus="true" style="outline: none;">  
<i class="fa fa-bullhorn"></i>  
<span>Форум</span>  
</a>  
</li>  
<li>  
<a href="/shop/" hidefocus="true" style="outline: none;">  
<i class="fa fa-shopping-cart"></i>  
<span>Магазин</span>  
</a>  
</li>  
</ul>  
</div>

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
#masteru.en {
right: 0;
text-align: right;
}
#masteru.en li span {
right: -100px;
}
#masteru.en li a:hover span {
right: 35px;
}

#masteru {
position: fixed;
top:20%;
z-index: 9999;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
#masteru ul {
list-style: none;
}
#masteru * {
margin: 0;
padding: 0;
outline: 0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#masteru li a {
text-decoration: none;
color: #fff;
display: block;
position: relative;
}
#masteru .fa {
vertical-align: middle;
font-size: 18px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
position: relative;
z-index: 4;
}
#masteru li span {
font-size: 15px;
vertical-align: middle;
height: 35px;
line-height: 35px;
width: auto;
white-space: nowrap;
overflow: hidden;
display: block;
padding: 0 15px;
position: absolute;
top: 0;
visibility: hidden;
z-index: 3;
}
#masteru li a:hover .fa {
transform: rotate(720deg);
}
#masteru li a:hover span {
visibility: visible;
}

#masteru li span {
background-color: #555;
}

#masteru li .fa {
background-color: #EEE;
color: #555
}
/* icons hover color */
#masteru li a:hover .fa {
color: #fff;
}

#masteru li:nth-child(10n+1) span, #masteru li:nth-child(10n+1) a:hover .fa {
background-color: #8350DD;
}
#masteru li:nth-child(10n+2) span, #masteru li:nth-child(10n+2) a:hover .fa {
background-color: #4EC5DB;
}
#masteru li:nth-child(10n+3) span, #masteru li:nth-child(10n+3) a:hover .fa {
background-color: #3DC25D;
}
#masteru li:nth-child(10n+4) span, #masteru li:nth-child(10n+4) a:hover .fa {
background-color: #99BE24;
}
#masteru li:nth-child(10n+5) span, #masteru li:nth-child(10n+5) a:hover .fa {
background-color: #38c;
}
#masteru li:nth-child(10n+6) span, #masteru li:nth-child(10n+6) a:hover .fa {
background-color: #ff0000;
}
#masteru li:nth-child(10n+7) span, #masteru li:nth-child(10n+7) a:hover .fa {
background-color: #000;
}
#masteru li:nth-child(10n+8) span, #masteru li:nth-child(10n+8) a:hover .fa {
background-color: #F1A111;
}
#masteru li:nth-child(10n+9) span, #masteru li:nth-child(10n+9) a:hover .fa {
background-color: #777;
}
#masteru li:nth-child(10n+10) span, #masteru li:nth-child(10n+10) a:hover .fa {
background-color: #30555C;
}