Простое css меню для сайта
Туда где хотите видеть меню
Code
<div id="menu4">
<ul>
<li class="k84">
<a href="">
<span class="title"><img src="Ваша иконка"/></span>
<span class="text">Меню</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="Ваша иконка"/></span>
<span class="text">Меню</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="Ваша иконка"/></span>
<span class="text">Меню</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="Ваша иконка"/></span>
<span class="text">Меню</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="Ваша иконка"/></span>
<span class="text">Меню</span>
</a>
</li>
</ul>
</div>
</div>
В css
Code
#menu4 ul {
list-style:none;
}
#menu4 ul li{
margin-left:20px;
float: left;
}
#menu4 ul li a{
text-decoration:none;
}
#menu4 ul li a span{
display:block;
}
#menu4 ul li a:hover span.title{
color:#00adef;
}
#menu4 ul li a span.text{
padding:0px 20px;
font-family: Georgia, serif;
font-size: 25px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6em;
color:#000;
visibility:hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}
.k84 {font-weight:bold;
cursor:pointer;
opacity:0.7;
background:#fff;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border:0px solid #000;
}
.k84:hover {font-size:30px;
font-weight:bold;
cursor:pointer;
opacity:1;
background:#fff;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border:10px solid #fff;
}