Совет CSS Для горизонтального меню (с анимацией)

[Wildcdu]

Про вертикальное меню уже говорили продолжим для горизонтального
[CSS]body {background: url('img/noise.png')}
#container {width: 750px;position: relative;margin: auto;top: 100px}
.nav, .nav ul {position: relative;margin: 0;padding: 0;list-style: none;}
/* Общие стили */
.nav {height:160px;display:inline-block}
.nav>li {display:block;float:left}
/*стили блоков первого уровня*/
.nav>li>div {
position: relative;
width: 120px;
height: 160px;
margin-right: 5px;
overflow: hidden;
cursor: pointer;
text-align: center;
background: #00afdd;
box-shadow: 0px 1px 2px rgba(30, 30, 30, .3);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
}
.nav div:hover {
/* увеличиваем блок*/
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
/* меняем бэкграунд */
background: #fff;
z-index: 5;
}
/*Стиль основных ссылок*/
.nav>li>div>a {
top: 0px;
position: relative;
display: block;
height: 100px;
padding-top: 65px;
text-decoration: none;
font-size: 20px;
font-weight: normal;
color: #fff;
-webkit-transition: all .3s;
-ms-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
}
/*Создаем размытие*/
.nav:hover div>a {opacity: .3;
text-shadow: 0px 0px 5px #fff,
0px 0px 5px #fff,
0px 0px 9px #fff;}
/*Основные ссылки при наведении*/
.nav div>a:hover, .nav li:hover a {top:-4px;text-shadow:none;opacity:1;font-size:23px;color:#29cef1}
/*Двигаем ссылку вверх при наведении*/
.nav .nested a:hover, .nav .nested:hover a {top:-60px;height:160px}
/*Подменю*/
.nav ul {
position: absolute;
top: -9999px;
margin: auto;
display: block;
width: 120px;
text-align: center;
opacity: 0;
-webkit-transition: .5s opacity ease-out;
-ms-transition: .5s opacity ease-out;
-moz-transition: .5s opacity ease-out;
-o-transition: .5s opacity ease-out;
}
/* показываем подменю */
.nav li div:hover ul {
top: 35px;
color: #fff;
opacity: 1}
/* Ссылки подменю */
.nav div:hover ul li a {
color: #00afdd;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
-webkit-transition: color .3s ease-out;
-ms-transition: color .3s ease-out;
-moz-transition: color .3s ease-out;
-o-transition: color .3s ease-out;
}
/* Цвет ссылок подменю при наведении */
.nav div ul li a:hover {color:#000}
/* Фон основных ссылок */
.nav>li>.blue-white {background:#00afdd}
/* фон основных ссылок при наведении */
.nav>li>.blue-white:hover {background:white}
/* Цвет текста основных ссылок */
.nav>li>.blue-white>a {color:#fff}
/* Цвет текста основных ссылок при наведении */
.nav>li>.blue-white:hover a {color:#00afdd}
/* Цвет ссылок подменю при наведении */
.nav .blue-white ul li a:hover { color:black}[/CSS]