На сайтах электронной торговли, или просто на больших порталах, крупные навигационные меню становятся все более популярными, так как они дают возможность наглядно отобразить большое количество информации не засоряя основное содержимое страницы. Рассмотрим, пошагово, все этапы по созданию такого крупного навигационного меню, используя свойства CSS3.
Шаг 1. Создание навигационной панели
Начнем с главного меню, основанного на ненумерованном списке HTML.
<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Контакты</a></li>
</ul>
Создание блока меню
Теперь используем некоторые основные стили CSS. Для блока меню определим фиксированную ширину и затем отцентрируем, указав для правого и левого margin-полей значение "auto".
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
}
Синтаксис, реализующий скругленные углы:
border:1px solid #002232; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;
Для фонового цвета используем градиентную заливку. Для старых версий браузеров — монотонную. При выборе интенсивности цветов градиентной заливки может помочь замечательный онлайн-инструмент Facade.
background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
Первая строка определяет цвет монотонной заливки (для старых браузеров); вторая и третья — создают градиентную заливку от верхнего края блока меню (цвет #0272a7) к нижнему (цвет #013953).
Выделим контур нашего меню, вставив дополнительно внутреннюю тень, образованную свойством "box-shadow".
Синтаксис этого свойства:
- первое значение — горизонтальное смещение,
- второе — вертикальное смещение,
- третье — ширина эффекта размытия отбрасываемой тени (в нашем примере — 1px, что образует четкую линию).
Установим все смещения равным нулю — получим внутреннюю, более светлую границу:
-moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff;
Итоговый CSS код для блока #main:
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Скругление углов */
border:1px solid #002232;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
/* Фоновая заливка и градиент */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Внутренняя тень */
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
Стилизация элементов меню
Начнем с выравнивания всех элементов меню по левому краю. Отступ между каждым элементом зададим свойством "margin-right".
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
Базовым фоновым цветом для элемента меню при наведении мыши (hover) выберем #F4F4F4. Градиентную заливку проведем от цвета #F4F4F4 вверху до #EEEEEE внизу.
Закруглить потребуется только верхние углы, так как к нижним будет "крепиться" выпадающая часть.
#menu li:hover {
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
}
Так как при наведении на элемент меню будет появляться рамка шириной в 1px, то padding отступы с боковых сторон следует уменьшить на 1px. Если этого не сделать — появляющаяся рамка будет отталкивать соседние элементы меню на 2 пикселя вправо. Поэтому запишем:
border: 1px solid #777777; padding: 4px 9px 4px 9px;
Теперь добавим закругления к верхним углам. Выпадающая часть будет точно "крепиться" к нижней кромке элемента родительского меню:
-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
Конечный CSS код для элементов меню при наведении мыши (hover)
#menu li:hover {
/* Фон и градиентная заливка */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Скругление углов */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
Сделаем для ссылок привлекательную тень, используя простой синтаксис свойства text-shadow: первое и второе значение определяют отступ отбрасываемой тени по горизонтали и вертикали (в нашем примере — 1px), третий параметр — ширину размытого участка тени (1px в примере), и последний — цвет отбрасываемой тени (черный #000):
text-shadow: 1px 1px 1px #000;
CSS код для ссылок в меню:
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
При наведении мыши на ссылку (учитывая, что фоновый цвет элемента меню — серый), установим для них более темный цвет текста (#161616) и белый цвет отбрасываемой тени.
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
Наконец, нам потребует придумать способ, сообщающий пользователям о том, что для данного элемента меню имеется еще и выпадающая часть. Будем использовать для этого простое изображение стрелки. Расположим его как фоновое изображение к элементу меню (li), с правым отступом (padding) и с верхним отступом (margin). При наведении мышки, значение верхнего отступа (margin) следует установит равным 7px, вместо 8px, так как появляется дополнительная рамка (без этого изображение стрелки будет выталкиваться вниз на 1 пиксель):
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}
Приведем все окончательные HTML и CSS коды для элементов меню. Можно видеть, что выпадающее меню отсутствует только у ссылки, ведущей на главную страницу:
<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#" class="drop">О компании</a></li>
<li><a href="#" class="drop">Услуги</a></li>
<li><a href="#" class="drop">Портфолио</a></li>
<li><a href="#" class="drop">Контакты</a></li>
</ul>
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Скругление углов */
border:1px solid #002232;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
/* Фоновая заливка и градиент */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Внутренняя тень */
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
/* Фон и градиентная заливка */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Скругление углов */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}
Взглянем на то, что же должно получиться в результате всех вышеописанных действий:
Шаг 2 - Кодируем выпадающее меню
"Классическое" выпадающее меню обычно содержит списки, вложенные в элементы родительских списков, например:
<ul id="menu"> <li><a href="#">Элемент 1</a> <ul> <li><a href="#">Подэлемент 1</a></li> <li><a href="#">Подэлемент 2</a></li> <li><a href="#">Подэлемент 3</a></li> </ul> </li> <li><a href="#">Элемент 2</a> <ul> <li><a href="#">Подэлемент 1</a></li> <li><a href="#">Подэлемент 2</a></li> </ul> </li> </ul>
Общая структура
Для нашего МегО меню, вместо вложенных списков, будем использовать стандартные элементы DIV:
<ul id="menu"> <li><a href="#">Элемент 1</a> <div> Содержимое выпадающего меню </div> </li> <li><a href="#">Элемент 2</a> <div> Содержимое выпадающего меню </div> </li> </ul>
Они станут основой выпадающих меню, в которые можно поместить все что душе будет угодно — абзацы текста, изображения, списки, контактную информацию и т. д. Все эти данные будут организованы в несколько колонок.
Контейнеры выпадающих меню
Выпадающие контейнеры различной величины будут содержать весь необходимый контент. Для удобства, назовем каждый выпадающий контейнер в соответствии с количеством колонок которые он содержит.
Для временного сокрытия всего этого содержимого воспользуемся абсолютным позиционированием с отрицательным левым отступом (margin):
position:absolute; left:-999em; /* Прячет содержимое выпадающего меню */
Фоновый цвет для старых браузеров будет таким же как и для элементов меню. Современные браузеры отобразят градиентную заливку фона от цвета #EEEEEE вверху выпадающей части до #BBBBBB внизу:
background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
Снова закруглим все углы, кроме левого верхнего:
border-radius: 0px 5px 5px 5px; -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px;
Итого в код CSS следует добавить:
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
position:absolute;
left:-999em; /* Прячет содержимое выпадающего меню */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Фоновая градиентная заливка */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Скругление углов */
border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
}
Без должно внимания к деталям можно получить нечто такое:
В нашем случае будем иметь следующее:
Как видно, в нашем случае выпадающая часть меню аккуратно "крепится" к родительскому элементу меню.
Определим для каждого выпадающего контейнера его ширину:
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
и отобразим их при наведении указателя мыши:
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;top:auto;
}
Пример использования выпадающих контейнеров
Теперь приступим непосредственно к формированию содержимого меню. Для наглядности назовем родительские элементы меню по количеству столбцов, содержащихся в выпадающем меню.
<ul id="menu"> <li><a href="#">Главная</a></li> <li><a href="#" class="drop">5 колонок</a> <div class="dropdown_5columns"> <p>Содержимое 5</p> </div> </li> <li><a href="#" class="drop">4 колонки</a> <div class="dropdown_4columns"> <p>Содержимое 4</p> </div> </li> <li><a href="#" class="drop">3 колонки</a> <div class="dropdown_3columns"> <p>Содержимое 3</p> </div> </li> <li><a href="#" class="drop">2 колонки</a> <div class="dropdown_2columns"> <p>Содержимое 2</p> </div> </li> <li><a href="#" class="drop">1 колонка</a> <div class="dropdown_1column"> <p>Содержимое 1</p> </div> </li> </ul>
И вот что мы имеем на текущий момент:
Шаг 3 - Многоколонная верстка в выпадающих контейнерах
Теперь, когда у нас уже есть готовые контейнеры для выпадающей части меню — создадим в них многоколонную верстку:
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
Колонки в деле
Вот пример верстки выпадающих меню, содержащих разное количество столбцов/колонок:
<ul id="menu"> <li><a href="#" class="drop">5 колонок</a> <div class="dropdown_5columns"> <div class="col_5"> <p>Содержимое 5 колонной верстки</p> </div> <div class="col_1"> <p>Содержимое 1 колонной верстки</p> </div> <div class="col_1"> <p>Содержимое 1 колонной верстки</p> </div> <div class="col_1"> <p>Содержимое 1 колонной верстки</p> </div> <div class="col_1"> <p>Содержимое 1 колонной верстки</p> </div> <div class="col_1"> <p>Содержимое 1 колонной верстки</p> </div> <div class="col_4"> <p>Содержимое 4 колонной верстки</p> </div> <div class="col_1"> <p>Содержимое 1 колонной верстки</p> </div> <div class="col_3"> <p>Содержимое 3 колонной верстки</p> </div> <div class="col_2"> <p>Содержимое 2 колонной верстки</p> </div> </div> </li> </ul>
Предпросмотр:
Шаг 4 - Правое выравнивание меню
Сейчас рассмотрим, как можно выравнять меню и содержимое выпадающей части по правому краю навигационной панели.
Для этой цели добавим новым CSS класс .menu_right, в котором отменим правый margin-отступ и сделаем элемент плавающим, с выравниванием по правому краю:
#menu .menu_right {
float:right;
margin-right:0px;
}
Теперь обратимся к выпадающему меню. В CSS коде выше, мы применили скругление для всех углов, кроме левого верхнего. Также учли необходимость слияния фоновых цветов в месте "крепления" выпадающего меню к родительскому.
Сейчас мы желаем "закрепить" выпадающее меню к правому краю родительского элемента меню. Для этого создадим новый класс - .align_right — в котором установим скругления для всех углов, кроме правого верхнего.
#menu li .align_right {
/* Скругления углов */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
Ну и в завершение — используем только что созданный класс для события hover (указатель мыши над элементом), и отобразим выпадающую часть меню с правым выравниванием:
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
Теперь все готово для работы:
<li class="menu_right"> <a href="#" class="drop">Правое</a> <div class="dropdown_1column align_right"> <div class="col_1"> <p>Содержимое 1-колонной верстки</p> </div> </div> </li>
Вот что должно получиться:
Шаг 5 - Наполнение меню контентом и его стилизация
Теперь, когда вся основная структура меню готова и описана свойствами CSS – можем приступить к формирования содержимого меню.
Общие стили
Начнем с определения общих стилей для абзацев и заголовков:
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
Будем использовать приятный синий цвет для ссылок внутри выпадающих блоков меню:
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
Стилизация списков
Теперь поправим стили списков. Мы должны отменить некоторые стили (такие как фоновая заливка и границы элементов), которые использовались в навигационном меню:
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
Стилизация изображений
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
И стиль для создания абзаца с картинкой слева:
.img_left {
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
Текстовые блоки
Для выделения отдельных текстовых блоков будем использовать стиль, определяющий темную фоновую заливку, скругленные углы и едва заметную внутреннюю тень:
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Внутренняя тень */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
Особые блоки списков
Напоследок, для особого выделения некоторых списков, воспользуемся стилем, приведенным ниже:
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
Совместимость с браузером IE6
Все современные браузеры поддерживают селектор :hover для любых html элементов. Это позволяет нам, например, использовать событие mouseover (указатель мыши над элементом) и подсвечивать элементы таблиц (tr) или списков (li) только с помощью свойств CSS.
Однако браузер IE6 обрабатывают селектор :hover по разному и абсолютно непредсказуемо.
Но есть возможность исправить это положение вещей, подключив дополнительно "поведенческий файл", добавляющий всю необходимую функциональность. Подробно о нем - здесь.
Используя комментарии с условием, добавим следующий код:
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->
Все окончательные коды
HTML часть
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Выпадающее меню на CSS3</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->
</head>
<body>
<ul id="menu">
<li><a href="#" class="drop">Главная</a>
<div class="dropdown_2columns"><!-- Начало 2-х колонного контейнера -->
<div class="col_2">
<h2>Приветствуем !</h2>
</div>
<div class="col_2">
<p>Это наглядная демонстрация возможностей МегО Меню!</p>
<p>Это меню, в котором можо использовать различные элементы верстки - заголовки, списки, изображения и т.д.</p>
</div>
<div class="col_2">
<h2>Кроссбраузерность</h2>
</div>
<div class="col_1">
<img src="img/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>Меню отлично работает во всех популярных браузерах.</p>
</div>
</div><!-- Конец 2-х колонного контейнера -->
</li>
<li><a href="#" class="drop">5 колонок</a>
<div class="dropdown_5columns"><!-- Начало 5 колонного контейнера -->
<div class="col_5">
<h2>Пример большого контейнера меню, разбитого на 5 столбцов/колонок</h2>
</div>
<div class="col_1">
<p class="black_box">Выделенный блок текста. Mauris et est augue, ut ornare dui. Ut quis tellus at eros posuere dictum.</p>
</div>
<div class="col_1">
<p>Morbi id felis vel lectus elementum aliquet sit amet eu nisl. Donec sit amet nibh elementum lorem lobortis placerat suscipit in eros. </p>
</div>
<div class="col_1">
<p class="italic">Пример текста в стиле italic. Aliquam molestie, dui in scelerisque feugiat, dolor neque ultricies tortor, sed imperdiet quam nunc id libero.</p>
</div>
<div class="col_1">
<p>Quisque ut tellus non purus placerat luctus. Sed euismod mi eget libero pulvinar eget posuere lacus fringilla.</p>
</div>
<div class="col_1">
<p class="strong">Пример жирного стиля текста. Aliquam cursus turpis metus, vel dignissim purus. Aenean pulvinar mollis egestas.</p>
</div>
<div class="col_5">
<h2>Немного текста с боковыми картинками</h2>
</div>
<div class="col_3">
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Curabitur porta imperdiet massa, sed tincidunt erat lobortis nec. Maecenas semper scelerisque nibh sed vulputate. Fusce enim nisi, facilisis malesuada feugiat nec, tincidunt ac velit.<a href="#">Подробнее...</a></p>
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Quisque dui elit, pellentesque sit amet tristique non, iaculis ac tellus. Nunc aliquam porta purus non posuere. Nulla sit amet libero vel dui commodo vehicula nec sed leo.<a href="#">Подробнее...</a></p>
</div>
<div class="col_2">
<p class="black_box">Этот блок с темным фоном может использоваться для выделения любого текста меню. Nam eget ultricies dolor. Sed porta eleifend enim vitae gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non tellus vel enim ultrices blandit auctor vitae metus. Pellentesque eget risus eros, vel molestie odio. Nunc tempor placerat pellentesque. Sed dui velit, blandit a aliquet ut, facilisis in diam.</p>
</div>
</div><!-- Конец 5 колонного контейнера -->
</li>
<li><a href="#" class="drop">4 колонки</a>
<div class="dropdown_4columns">
<div class="col_4">
<h2>Некий заголовок</h2>
</div>
<div class="col_1">
<h3>Ряд ссылок</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<h3>Полезные ссылки</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3>Другие</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<h3>Разное</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">1 колонка</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">3 колонки</a>
<div class="dropdown_3columns align_right">
<div class="col_3">
<h2>Стилизованный список</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
<div class="col_3">
<h2>Несколько изображений для примера</h2>
</div>
<div class="col_3">
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Mauris justo nisi, placerat vel molestie ut, pharetra eu erat. Quisque at posuere orci. Donec blandit velit quis est luctus at tincidunt purus luctus. Nulla euismod laoreet massa iaculis tempor.<a href="#">Подробнее...</a></p>
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Donec gravida dolor eget leo accumsan id congue ligula euismod. Maecenas egestas mattis porttitor. Proin tempus, diam id scelerisque pulvinar, magna nulla mattis risus, ut consectetur massa risus a dui. <a href="#">Подробнее...</a></p>
</div>
</div>
</li>
</ul>
</body>
</html>
CSS часть
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Скругление углов */
border:1px solid #002232;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
/* Фоновая заливка и градиент */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Внутренняя тень */
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
/* Фон и градиентная заливка */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Скругление углов */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
position:absolute;
left:-999em; /* Прячет содержимое выпадающего меню */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Фоновая градиентная заливка */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Скругление углов */
border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;top:auto;
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Скругления углов */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left {
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Внутренняя тень */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
Оригинал статьи на английском языке - тут