В css
Code
#menu4 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 30px;
letter-spacing: -3px;
line-height: 1.2em;
border-top:5px dotted #000000;
border-bottom:5px dotted #000000;
float:left;
clear:both;
margin:20px;
}
#menu4 ul li{
float:left;
}
#menu4 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#000000;
width:170px;
}
#menu4 ul li a span{
display:block;
}
#menu4 ul li a span.title{
}
#menu4 ul li a:hover span.title{
color:#00adef;
}
#menu4 ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6em;
color:#c7e7f3;
visibility:hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}
.cpojer-links { font-size:13px; }
.cpojer-links a {
display: inline-block;
padding: 4px;
outline: 0;
color: #3a599d;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
background: #3a599d;
text-decoration: none;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}
Туда где хотите видеть меню
Code
<div class="cpojer-links">
<div id="menu4">
<ul>
<li><a href="">
<span class="title">Меню</span>
<span class="text">Ваша подпись</span>
</a>
</li>
<li><a href="">
<span class="title">Меню</span>
<span class="text">Ваша подпись</span>
</a>
</li>
<li><a href="">
<span class="title">Меню</span>
<span class="text">Ваша подпись</span>
</a>
</li>
<li><a href="">
<span class="title">Меню</span>
<span class="text">Ваша подпись</span>
</a>
</li>
<li><a href="">
<span class="title">Меню</span>
<span class="text">Ваша подпись</span>
</a>
</li>
<li><a href="">
<span class="title">Меню</span>
<span class="text">Ваша подпись</span>
</a>
</li>
</ul>
</div>
</div>