Стильное выпадающее меню на CSS3

Снова здравствуйте! Сегодня я предлагаю Вам посмотреть на то, как просто можно сделать стильное выпадающее меню для своего сайта или блога на чистом CSS3.

Тем более, что ранее мы научились добавлять эффекты картинкам, а недавно и кнопкам придали "живого" вида. Так, что эта запись должна быть Вам интересной!

Смотреть демо "Выпадающее меню на CSS3"

Ну-с, приступим сразу к CSS кода, который нужно либо поместить в файл со стилями вашего сайта, например style.css, либо вставить на нужной страницу перед тегом </head> и между тегами <style></style>

CSS

/* Основа */

.menuip,.menuip ul,.menuip li,.menuip a { 

margin: 0;
 padding: 0;
 border: none;
 outline: none;
}

/* Позиционирование */
ul.menuip {
 margin: auto auto 0 auto;
}

/* Меню */
.menuip {
 height: 40px;
 width: auto;
 background: #4c4e5a;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;

/* Фон меню */

  background: linear-gradient(top, #535562 0%, #202023 100%);
 background: -moz-linear-gradient(top, #535562 0%, #202023 100%);
 background: -webkit-linear-gradient(top, #535562 0%, #202023 100%);  
 background: -ms-linear-gradient(top, #535562 0%, #202023 100%); 
}

.menuip li {
 list-style: none;
 float: left;
 display: block;
 height: 40px;
 position: relative;
}

/* Ссылки */
.menuip li a {
 display: block;
 text-decoration: none;
 font-weight: bold;
 color: #FFF;
 font-size: 15px;
 padding: 0 15px;
 margin: 5px 0;
 line-height: 30px;
 border-left: 1px solid #393942;
 border-right: 1px solid #393942;

 transition: color .3s ease;
 -moz-transition: color .3s ease;
 -webkit-transition: color .3s ease;
 -ms-transition: color .3s ease;   
}

 .menuip li:first-child a { border-left: none; }
.menuip li:last-child a { border-right: none; }
.menuip li:hover > a { color: #7FFF00; } /*Цвет ссылок*/

/* Подменю */
.menuip ul {
 position: absolute;
 opacity: 0;
 background: #575a62;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px; 
 transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -webkit-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;    
}
.menuip li:hover > ul {
 opacity: 1;
}
.menuip ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
}
.menuip li:hover > ul li {
 height: auto;
 overflow: visible;
}
.menuip ul li a {
 width: 100px;
 margin: 0;
 padding: 5px 15px;
 border: none;
 border-bottom: 1px solid #353539; 
}
.menuip ul li:last-child a { border: none; } 

А вот и сам код меню. Его вставляем в нужное место (сверху будет смотреться наилучше) и не забываем менять пункты меню на свои.

HTML

<ul class="menuip">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Веб</a><ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li></ul></li>
<li><a href="#">Сервисы</a><ul>
<li><a href="#">Хостинг</a></li>
<li><a href="#">Домены</a></li></ul></li>
<li><a href="#">Контакты</a></li>
</ul>

Вот и всё. Мы сделали красивое drop-down меню на CSS3!
На этом всё. Жду ваши вопросы ниже в комментариях. Не болейте, адйьос ;)