Простое и эффектное выпадающее меню на jquery и css3

Содержание:

Горизонтальное выпадающее меню
Разделители
- - Bootstrap 4 против Bootstrap 3
Как увеличить размер шрифта выпадающего списка в Excel?
- - Увеличьте размер шрифта раскрывающегося списка с помощью кода VBA, чтобы увеличить масштаб
  - Создать выпадающий список с флажками в Excel
Примеры горизонтального навбара
Создать мега меню
Часть 2
- Составление CSS
- Подсказки
Выравнивание справа
Всплывающее меню
HTML структура
CSS
Пример
Шаг 3 — Как создать выпадающее меню CSS
Настройка
Заголовки меню
- - Bootstrap 4 против Bootstrap 3
Применение различных свойств для сокрытия выпадающих блоков
Использование CSS3 анимации
HTML-разметка

Горизонтальное выпадающее меню

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка
добавляется вложенный список

или .

Для позиционирования вложенного меню относительно основного меню объявляются следующие стили: — для элемента списка, в который вложен выпадающий список: li ; — для выпадающего меню ul , а также значения left и top .

Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .

Скрыть выпадающее меню можно несколькими способами: 1) display: none; 2) visibility: hidden; 3) opacity: 0; 4) transform: scaleY(0); 5) с помощью библиотеки jQuery.

See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

Способ 3.

Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .

Способ 4.

Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu , т.е. из верхнего левого угла.

Способ 5. С помощью jQuery

2. 3D выпадающее меню

Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.

See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

3. Разворачивающееся выпадающее меню с логотипом

В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.

4. Увеличивающееся выпадающее меню

Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu , при наведении размер увеличивается до .topmenu > li:hover .submenu .

See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

5. Подъезжающее выпадающее меню

Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.

See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.

Разделители

Код меню для сайта html: несколько простых примеров кода для улучшения навигации на блоге

Добавьте разделители в выпадающее меню, применяя класс .dropdown-divider к элементу <div>.

Bootstrap 4 против Bootstrap 3

Bootstrap 3 применяет класс .divider к элементу <li> (потому что для построения выпадающих меню Bootstrap 3 использовал списки). Bootstrap 4 использует вместо этого класс .dropdown-divider и применяет его к элементу <div>.

Как увеличить размер шрифта выпадающего списка в Excel?

Css3

Выпадающий список — очень полезная функция в Excel, когда вы создаете раскрывающийся список на своем листе, пробовали ли вы когда-нибудь увеличить размер шрифта раскрывающегося списка, чтобы сделать выбранную запись больше и более читаемой, как показано на скриншоте слева? В этой статье будет рассказано об обходном пути для ее решения.

Увеличьте размер шрифта раскрывающегося списка с помощью кода VBA, чтобы увеличить масштаб

На самом деле, у нас нет прямого способа увеличить размер шрифта раскрывающегося списка, но вы можете применить следующий код VBA, чтобы изменить настройку масштабирования ячеек раскрывающегося списка, чтобы текст выглядел больше. Пожалуйста, сделайте следующее:

1. Перейдите на рабочий лист, содержащий раскрывающийся список, размер шрифта которого вы хотите увеличить.

2. Щелкните правой кнопкой мыши вкладку листа и выберите Просмотреть код из контекстного меню во всплывающем Microsoft Visual Basic для приложений окна, скопируйте и вставьте следующий код в пустое Модуль окна:

Код VBA: увеличьте размер шрифта раскрывающегося списка, чтобы увеличить масштаб ячейки

Private Sub Worksheet_SelectionChange(ByVal Target As Range)
'updateby Extendoffice
    On Error GoTo LZoom
    Dim xZoom As Long
    xZoom = 100
    If Target.Validation.Type = xlValidateList Then xZoom = 130
LZoom:
    ActiveWindow.Zoom = xZoom
End Sub

3. Затем сохраните и закройте этот код, теперь, когда вы щелкаете ячейки раскрывающегося списка, масштаб ячейки будет увеличен, а раскрывающийся список будет казаться больше, но, когда вы щелкнете другие ячейки, не содержащие раскрывающегося списка, увеличение ячейки будет нормальным.

Внимание: В приведенном выше коде xZoom = 130 изменит масштаб ячеек раскрывающегося списка на 130, вы можете изменить это значение масштабирования по своему усмотрению

Создать выпадающий список с флажками в Excel

Если вам нужно создать раскрывающийся список с несколькими флажками, чтобы выбрать несколько элементов из списка в одну ячейку, возможно, у вас нет прямого способа решить эту задачу. Но, Kutools for Excel поддерживают удивительную функцию — Раскрывающийся список с флажкамис помощью этой функции вы можете быстро создать раскрывающийся список с флажками в указанном диапазоне, текущем листе, текущей книге или всех открытых книгах в зависимости от ваших потребностей. Нажмите, чтобы загрузить Kutools for Excel!

Примеры горизонтального навбара

How to resize background images with css3

Создайте базовую горизонтальную панель навигации с темным цветом фона и измените цвет фона ссылок, когда пользователь наводит на них указатель мыши:

Главная
Новости
Контакты
Про нас

Пример

ul { list-style-type: none; margin: 0; padding: 0;
overflow:
hidden; background-color: #333;}li {
float: left;}li a { display: block;
color: white; text-align: center;
padding: 14px 16px; text-decoration: none;}/* Измените цвет ссылки на #111 (черный) при наведении курсора */li a:hover { background-color:
#111;}

Активная/Текущая навигационная ссылка

Добавьте к текущей ссылке класс, чтобы пользователь знал, на какой странице он находится:

Главная
Новости
Контакты
Про нас

Пример

.active { background-color: #4CAF50;}

Выровнять ссылки по правому краю, перемещая элементы списка вправо ():

Главная
Новости
Контакты
Про нас

Пример

<ul> <li><a href=»#home»>Главная</a></li>
<li><a href=»#news»>Новости</a></li> <li><a href=»#contact»>Контакты</a></li>
<li style=»float:right»><a
class=»active» href=»#about»>Про нас</a></li></ul>

Добавьте свойство к чтобы создать разделители ссылок:

Главная
Новости
Контакты
Про нас

Пример

/* Добавить серую правую границу ко всем элементам списка, кроме последнего элемента (last-child) */li { border-right: 1px solid #bbb;}
li:last-child { border-right: none;}

Фиксированный навбар

Сделайте так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:

Зафиксировать внизу

ul { position: fixed; bottom: 0; width: 100%;}

Примечание: Фиксированное положение может некорректно работать на мобильных устройствах.

Пример серой горизонтальной панели навигации с тонкой серой границей:

Главная
Новости
Контакты
Про нас

Пример

ul { border: 1px solid #e7e7e7;
background-color: #f3f3f3;}li a { color:
#666;}

Липкий навбар

Добавьте к чтобы создать липкую панель навигации.

Прикрепленный (липкий) элемент переключается между относительным и фиксированным, в зависимости от положения прокрутки. Он позиционируется относительно, пока не будет достигнута заданная позиция смещения в области просмотра — затем он «залипает» на месте (как при ).

Пример

ul { position: -webkit-sticky; /* Safari */
position: sticky; top: 0;}

Примечание: Internet Explorer не поддерживает sticky позиционирование. Safari требует префикс (смотрите пример выше). Необходимо указать хотя бы одно из следующих значений , , или чтобы работало sticky позиционирование.

Создать мега меню

Создайте выпадающее меню, которое появляется, когда пользователь перемещает курсор мыши на элемент внутри панели навигации.

Шаг 1) Добавить HTML:

Пример

<div class=»navbar»> <a href=»#home»>Главная</a> <a href=»#news»>Новости</a> <div class=»dropdown»> <button class=»dropbtn»>Выпадающий <i class=»fa fa-caret-down»></i> </button> <div class=»dropdown-content»> <div class=»header»> <h2>Мега меню</h2> </div> <div class=»row»> <div class=»column»> <h3>Категории 1</h3> <a href=»#»>Ссылка 1</a> <a href=»#»>Ссылка 2</a> <a href=»#»>Ссылка 3</a> </div> <div class=»column»> <h3>Категории 2</h3> <a href=»#»>Ссылка 1</a> <a href=»#»>Ссылка 2</a> <a href=»#»>Ссылка 3</a> </div> <div class=»column»> <h3>Категории 3</h3> <a href=»#»>Ссылка 1</a> <a href=»#»>Ссылка 2</a> <a href=»#»>Ссылка 3</a> </div> </div> </div> </div></div>

Объяснение примера

Используйте любой элемент, чтобы открыть выпадающее меню, например элемент <button>, <a> или <p>.

Используйте элемент контейнера (например, <div class=»dropdown-content»>), чтобы создать выпадающее меню и добавить сетку (столбцы) и добавить раскрывающиеся ссылки внутри сетки.

Оберните элемент <div class=»dropdown»> вокруг кнопки и элемент контейнер (<div class=»dropdown-content»> в позиции выпадающего меню с помощью правильного CSS.

Шаг 2) Добавить CSS:

Пример

/* Контейнер навигации */.navbar { overflow: hidden; background-color: #333; font-family: Arial;}/* Ссылки в панели навигации */.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}/* Выпадающий контейнер */.dropdown { float: left; overflow: hidden;}/* Кнопка выпадающего списка */.dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; /* Важно для вертикального выравнивания на мобильных телефонах */ margin: 0; /* Важно для вертикального выравнивания на мобильных телефонах */}/* Добавить красный цвет фона для ссылок на навигационную панель при наведении курсора */.navbar a:hover, .dropdown:hover .dropbtn { background-color: red;}/* Выпадающее содержимое (скрыто по умолчанию) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}/* Мега заголовок меню, если это необходимо */.dropdown-content .header { background: red; padding: 16px; color: white;}/* Показать выпадающее меню при наведении курсора */.dropdown:hover .dropdown-content { display: block;}/* Создайте три одинаковых столбца, которые плавают рядом друг с другом */.column { float: left; width: 33.33%; padding: 10px; background-color: #ccc; height: 250px;}/* Ссылки стиля внутри столбцов */.column a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left;}/* Добавить цвет фона при наведении курсора */.column a:hover { background-color: #ddd;}/* Очистить поплавки после столбцов */.row:after { content: «»; display: table; clear: both;}

Объяснение примера

Мы стилизовали навигационную панель и ссылки на навигационную панель с фоновым цветом, заполнением и т.д.

Мы оформили кнопку выпадающего списка с фоном цвета, заполнением и т.д.

Класс использовать , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью ).

Класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Он расположен так, чтобы быть видимым прямо под кнопкой раскрывающегося списка, а ширина установлена на 100%, чтобы покрыть весь экран.

Вместо того, чтобы использовать границу, мы использовали свойство , чтобы сделать выпадающее меню похожим на «карту». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.

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

Классы используются для создания трех столбцов, которые плавают рядом друг с другом в раскрывающемся меню (для отображения различных категорий).

Часть 2

Составление CSS

Откройте CSS. Разместите ссылку на CSS стили в разделе <head> HTML-документа, если вы еще этого не сделали. В этой статье мы не будем касаться основных свойств CSS, таких как настройка шрифта и цвет фона:

Добавьте код clearfix. Помните класс «clearfix«, который мы добавили к списку меню? Как правило, элементы HTML раскрывающегося списка имеют прозрачный фон и могут раздвигать другие элементы. Несложная настройка CSS поможет исправить эту проблему. Вот простое и красивое решение, хотя оно не поддерживается в Internet Explorer 7 и более ранних версиях:

.clearfix:after {
content: "";
display: table;
}

Создание базовой структуры. Представленный ниже код задает размещение меню вдоль верхней части страницы и скрывает выпадающие элементы. Это только каркас общей структуры, который позволяет сосредоточиться на других элементах раскрывающегося свертывающегося списка HTML. Вы можете позже расширить его дополнительными свойствами CSS, такими как отступы и интервалы:

.nav-wrapper {
   width:100%;
   background: #999;
}

.nav-menu {
   position:relative;
   display:inline-block;
}

.nav-menu li {
   display: inline;
   list-style-type: none;
}

.sub-menu {
   position:absolute;
   display:none;
   background: #ccc;
}

Задаем вывод выпадающих элементов при наведении курсора мыши. Элементы в выпадающем списке по умолчанию скрыты. Вот как реализуется вывод вложенного списка при наведении курсора мыши на родительский элемент:

.nav-menu ul li:hover > ul {
   display:inline-block;
}

Если пункты древовидного раскрывающегося списка HTML меню ведут к дополнительным подчиненным выпадающим меню, то любые свойства, добавляемые здесь, будут влиять на них. Если вы хотите задать стиль только для выпадающих меню первого уровня, используйте вместо этого «.nav-menu > ul«:

Маркирование выпадающих меню стрелками. Веб-дизайнеры, как правило, показывают, что элемент содержит вложенное выпадающее меню, с помощью стрелки вниз. Следующий код добавляет стрелку к каждому элементу меню:

.nav-menu > ul > li:after {
   content: "25BC"; /*escaped unicode for the down arrow*/
   font-size: .5em;
   display: inline;
   position: relative;
   }

Изменить положение стрелки можно с помощью свойств up, bottom, right или left.

Если не все пункты раскрывающегося списка HTML содержат вложенные выпадающие меню, не задавайте стиль для всего класса nav-menu. Вместо этого добавьте еще один класс (например, dropdown) для каждого элемента li, к которому нужно добавить стрелку. Укажите этот класс, а не приведенный в коде выше:

Настройка отступов, фона и других свойств. Теперь наше меню является функциональным, но мы можем несколько улучшить его внешний вид с помощью редактирования кода CSS.

Подсказки

Если вы хотите добавить выпадающее меню в форму, HTML 5 позволяет легко сделать это с помощью элемента ;
Ссылка <a href=»#»> прокручивает страницу вверх, в то время как ссылка на несуществующий анкор, такая как <a href=»#!»>, не будет прокручивать страницу. Если это кажется вам не слишком аккуратным, то можно изменить внешний вид курсора с помощью CSS.

Вадим Дворниковавтор-переводчик статьи «How to Create a Dropdown Menu in HTML and CSS»

Выравнивание справа

Вы можете добавить класс .dropdown-menu-right к классу .dropdown-menu, чтобы выровнять меню по правой стороне его родителя.

Всплывающее меню

Вы можете изменить выпадающее меню, чтобы оно стало «всплывающим». Для этого используйте .dropup вместо .dropdown у родительского элемента.

HTML структура

<ul class=’menu’>
  <li><a href=»#»>Section 1</a></li>
  <li><a href=»#»>Section 2</a>
   <ul> <!—выпадающий блок—>
    <li><a href=»#»>Some page</a></li>
    <li><a href=»#»>Some page</a></li>
    <li><a href=»#»>Some page</a></li>
   </ul>
  </li>
  <li><a href=»#»>Section 3</a>
   <ul> <!—выпадающий блок—>
    <li><a href=»#»>Some page</a></li>
    <li><a href=»#»>Sub-section</a>
      <ul> <!—выпадающий блок второго уровня—>
       <li><a href=»#»>Some page</a></li>
       <li><a href=»#»>Some page</a></li>
       <li><a href=»#»>Some page</a></li>
      </ul>
    </li>
   </ul>
  </li>
</ul>
на основе других HTML-тегов

CSS

В файл styles.css добавим несколько стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}

Затем примените эти стили к header.

header {
   height: 70px;
   background-color: #22292F;
   padding: 10px 0;
}

Теперь темная панель навигации растягивается на всю ширину окна просмотра.

Добавьте приведенные ниже стили к классу menu-wrap:

.menu-wrap {
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
}

Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.

Стилизуем каждый из этих дочерних элементов один за другим.

.logo-img {
   height: 50px;
}
.menu-icon {
   font-size: 2.4em;
   color: #ffffff;
   line-height: 50px;
}

В результате мы получили правильно позиционированные логотип и иконку нужного размера. Теперь нужно на мобильных устройствах абсолютно позиционировать все пункты меню ниже панели. Сначала добавьте следующий код:

nav {
   position: absolute;
   background-color: #3D4852;
   top:70px;
   left:0;
   width: 100%;
}

Теперь добавьте стили списка и ссылок:

nav ul {
   list-style-type: none;
}
nav ul li {
   padding: 0 15px;
}
nav ul li a {
   display: inline-block;
   padding: 12px;
   /* Добавьте ниже свои пользовательские стили, чтобы изменить отображение ссылок */
   color: #DAE1E7;
   text-decoration: none;
   letter-spacing: 0.05em;
}

Также добавьте для ссылок стили при наведении и фокуса:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Теперь в браузере отображается следующее:

Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden. Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.

Пример

Вот пример выпадающего меню.

Шаг 3 — Как создать выпадающее меню CSS

Мы стилизуем наш HTML код используя следующие CSS правила:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.

Ниже представлен финальный результат нашего файла menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Главное меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>
</body>
</html>

В этом примере мы используем внутренние таблицы стилей, что означает CSS стили находятся в самом файле HTML. Однако существует множество способов для подключения CSS стилей к HTML документу.

Как только вы закончите, финальный результат должен быть похож на это:

Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.

Настройка

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега <title>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

Создайте файл styles.css и подключите его в HTML-документе:

<link rel="stylesheet" href="styles.css">

Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.

Заголовки меню

Добавьте заголовок в выпадающее меню путём применения класса .dropdown-header к элементу заголовка (<h1> — <h6>).

Bootstrap 4 против Bootstrap 3

Bootstrap 3 применяет класс .dropdown-header к элементу <li> (потому что для построения выпадающих меню Bootstrap 3 использовал списки). Bootstrap 4 применяет класс .dropdown-header к элементам заголовка.

Применение различных свойств для сокрытия выпадающих блоков

displayoverflowtopleftoverflow
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
  overflow: hidden; /*все блоки вне видимой области будут скрыты*/
}/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
   background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
  position: absolute;
  *display: none;
  background: #666;
  border: 1px solid #999;
  min-width: 150px;
}
.menu li:hover {
  overflow: visible; /*при наведении покажет скрытую область*/
}.menu ul {
  left: 0;
  top: 100%;
}
.menu li ul li ul{
  left: 100%;
  top: 0%;
}

top
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
}
/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
  background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
  position: absolute;
  background: #666;
  border: 1px solid #999;
  min-width: 150px;
  top: -9999em; /*изначальное смещение выпадающих блоков*/
}
.menu li:hover > ul {
  left: 0;
  top: 100%;
}
.menu li ul li:hover > ul {
  left: 100%;
  top: 0%;
}

Использование CSS3 анимации

transition
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
  overflow: hidden;
}
/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
   background: #0C6;
}
.menu ul {  position: absolute;
  background: #666;
  border: 1px solid #999;/*установленные начальные параметры*/
  width: 0px;
  opacity: ;/*параметры применяемой анимации*/
  -webkit-transition: all .25s ease .1s;
  -moz-transition: all .25s ease .1s;
  -o-transition: all .25s ease .1s;
  -ms-transition: all .25s ease .1s;
  transition: all .25s ease .1s;
}.menu li:hover {
  overflow: visible;
}/*приобретаемые параметры при наведении на родителя*/
.menu li:hover > ul {
  opacity: 1;
  width: 150px;
}.menu ul {
  left: 0;
  top: 100%;
}
.menu li ul li ul{
  left: 100%;
  top: 0%;
}

Параметры для свойства transition задаются в следующем порядке:
[свойство|продолжительность анимации|тип анимации|пауза перед выполнением]
Например: ~~transition~~: height 1s easy-in .5s; Что на словах можно истолковать как: плавно изменить высоту элемента, в течении 1 секунды, ускоряясь в завершении, начав анимацию с паузой в полсекунды.
Значении all указывает что анимация должна воздействовать на все доступные свойства.
http://magentawave.com

HTML-разметка

Добавим doctype HTML5 и несколько ссылок в секцию <head> нашего HTML-документа, тем самым подключив CSS-файлы:

<meta charset="utf-8" />
CSS3 Pop Out Menu
                <link href="css/normalize.css" rel="stylesheet" />
                <link href="css/style.css" rel="stylesheet" media="screen" />

Элементы меню находятся внутри контейнера div с классом container и сгруппированы в неупорядоченный список.

Каждый элемент имеет класс box, имеет внутри себя теги <a> и <h2> (для заголовка элемента):

<div class=»container»>
<ul class=»icon-menu»>
    <li class=»icon-box home»><a href=»#»>
</a>
<h2>Home</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box aboutme»><a href=»#»>
</a>
<h2>About Me</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box portfolio»><a href=»#»>
</a>
<h2>Portfolio</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box blog»><a href=»#»>
</a>
<h2>Blog</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box contact»><a href=»#»>
</a>
<h2>Contact</h2>
<a href=»#»>
 </a></li>
</ul>
</div>

Теперь, наша HTML-разметка готова и должна напоминать нечто похожее: