JSFiddle - React, Tailwind, and code Playground

by vo1daus

HTML

<ul id="menu">
<li><a href="#">Главня</a></li>

<li><a href="#">Файлы</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Гайды</a></li>
<li><a href="#">Магазин</a></li>
<li><a href="#">Новичку</a></li>
<li><a href="#">Live Chat</a></li>
</ul>

CSS

body {
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#menu {
margin : 0 auto;
background: url(http://s005.radikal.ru/i210/1205/2f/311917d5e33f.png);
background-repeat: repeat-x;
width: 1045px;
font :  18px serif;
height: 45px;
}


#menu li {
    overflow: hidden;
height: 100%;
text-align:center;
float: left;
text-decoration : none;
display : block;

padding-left: 10px ;
padding-right: 10px;
background: url(http://storage4.static.itmages.ru/i/12/0518/s_1337293003_3377361_a5a8b569b1.png) 100% 0 no-repeat ;
}



#menu li a {
color: #ea9f27;
text-decoration : none;
display : block;
margin-top: 12px;
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;

}



#menu  li:hover{
background: grey url(http://storage4.static.itmages.ru/i/12/0518/s_1337293003_3377361_a5a8b569b1.png) 100% 0 no-repeat ;
}
}