1. CSS
* {
margin:0;
padding:0;
}
#navigationMenu li {
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span {
width: 0;
left: 38px;
padding: 0;
position: absolute;
overflow: hidden;
font-family: 'Myriad Pro',Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.6px;
white-space: nowrap;
line-height: 39px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a {
background: url('navigation.jpg') no-repeat;
height: 39px;
width: 38px;
display: block;
position: relative;
text-decoration: none;
}
#navigationMenu a:hover span {
width :auto;
padding: 0 20px;
overflow: visible;.
text-decoration: none;
}
#navigationMenu a:hover {
text-decoration: none;
-moz-box-shadow: 0 0 5px #9ddff5;
-webkit-box-shadow: 0 0 5px #9ddff5;
box-shadow: 0 0 5px #9ddff5;
}
/* Зелёная кнопка */
#navigationMenu .home {
background-position: 0 0;
}
#navigationMenu .home:hover {
background-position: 0 -39px;
}
#navigationMenu .home span {
background-color: #7da315;
color: #3d4f0c;
text-shadow: 1px 1px 0 #99bf31;
}
/* Голубая кнопка */
#navigationMenu .about {
background-position: -38px 0;
}
#navigationMenu .about:hover {
background-position: -38px -39px;
}
#navigationMenu .about span {
background-color: #1e8bb4;
color: #223a44;
text-shadow: 1px 1px 0 #44a8d0;
}
/* Оранжевая кнопка */
#navigationMenu .services {
background-position: -76px 0;
}
#navigationMenu .services:hover {
background-position: -76px -39px;
}
#navigationMenu .services span {
background-color: #c86c1f;
color: #5a3517;
text-shadow: 1px 1px 0 #d28344;
}
/* Желтая кнопка */
#navigationMenu .portfolio {
background-position: -114px 0;
}
#navigationMenu .portfolio:hover {
background-position: -114px -39px;
}
#navigationMenu .portfolio span {
background-color: #d0a525;
color: #604e18;
text-shadow: 1px 1px 0 #d8b54b;
}
/* Пурпурная кнопка */
#navigationMenu .contact {
background-position: -152px 0;
}
#navigationMenu .contact:hover {
background-position: -152px -39px;
}
#navigationMenu .contact span {
background-color: #af1e83;
color: #460f35;
text-shadow: 1px 1px 0 #d244a6;
}
2 HTML
<ul id="navigationMenu">
<li>
<a class="home" href="#">
<span>Главная</span>
</a>
</li>
<li>
<a class="about" href="#">
<span>О Нас</span>
</a>
</li>
<li>
<a class="services" href="#">
<span>Сервисы</span>
</a>
</li>
<li>
<a class="portfolio" href="#">
<span>Портфолио</span>
</a>
</li>
<li>
<a class="contact" href="#">
<span>Контакты</span>
</a>
</li>
</ul>
3. Изображение