Простое одноуровневое меню
Код менюшки
Код
<nav class="ph-lift">
<ul>
<li class="active"><a href="#home" data-title="Основное">Главная</a></li>
<li><a href="#portfolio" data-title="Это сделал я">Мои работы</a></li>
<li><a href="#about" data-title="Любопытствуете?">Кто я?</a></li>
<li><a href="#contact" data-title="Напишите мне">Контакт</a></li>
<ul>
</nav>
CSSКод
/* Менюшка*/
nav.ph-lift ul li {
float: left;
height: 90px;
line-height: 90px;
background: white;
overflow: hidden;
transition: all.6s ease; }
nav.ph-lift ul li:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
background: teal; }
nav.ph-lift ul li a {
display: block;
text-decoration: none;
color: #007e7e;
padding: 0 45px;
margin-top: 0;
transition: all.6s ease; }
nav.ph-lift ul li:hover a {
margin-top: -90px;
color: white;
text-shadow: 0 1px 2px black; }
nav.ph-lift ul li a:after {
content: attr(data-title);
display: block; }
/*Конец менюшки*/