Html меню горизонтальное выпадающее меню – Как сделать горизонтальное или вертикальное выпадающее меню для сайта на основе CSS и Html в онлайн сервисе

Leave a Comment / Html / By /

Простое и красивое горизонтальное выпадающее меню на CSS и HTML — Технический блог

14 мая 2017  /  HTML & CSS

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

У меня на сайте оно выглядит так, при наведении мыши на пункт меню «О блоге» выпадает вертикальное подменю:

Простое горизонтальное выпадающее меню на CSS и HTML

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

Код горизонтального выпадающего меню выглядит так, это реальный пример взятый с одного из моих сайтов:


<nav role="navigation">
<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="#">О блоге</a>
    <ul>
      <li><a href="/about">Об авторе</a></li>
      <li><a href="/history">История блога</a></li>
      <li><a href="/privacy-policy">Политика конфиденциальности</a></li>
      <li><a href="/disclaimer">Отказ от ответственности</a></li>
    </ul>
  </li>
  <li><a href="/sitemap">Карта сайта</a></li>
  <li><a href="/contact">Обратная связь</a></li>
</ul>
<nav>

Это классический вариант по структуре меню из комбинаций тегов UL и LI. Который встречается на большинстве сайтов в интернете, в том числе и WordPress.

CSS код стилей для горизонтального выпадающего меню


/*| Navigation |*/

nav{
background: #334; /* Задаем основной фон меню */
padding: 0 3%; /* Задаем внутренние отступы */
}

nav ul {
list-style: none; /* Убираем маркер для элементов списка */
}

nav ul li {
display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */
}

nav ul li a {
display:block; /* Настраиваем оформление пунктов меню */
padding: 15px 20px;
font-size: .9em;
color: #eee;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
border-top: 1px solid #445;
}

nav ul li:hover {
background: #445; /* Меняем фон пункта меню при наведении указателя мыши */
}

nav ul li ul {
display: none; /* Прячем пункты выпадающего блока меню */
position:absolute;
background: #334; /* Задаем фон выпадающего блока меню */
}

nav ul li:hover ul {
display:block; /* Отображаем подменю при наведении мыши */
}

nav ul li ul li {
display:block; /* Выстраиваем по вертикали пункты выпадающего меню */
}

Выводы о реализации меню на CSS и HTML

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

Так же предложенное решение содержит минимум оформления и требует доработки под дизайн сайта, где оно будет внедряться.

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

.cbp-hrmenu {

    width: 100%;

    margin-top: 2em;

    border-bottom: 4px solid #47a3da;

}

/* general ul style */

.cbp-hrmenu ul {

    margin: 0;

    padding: 0;

    list-style-type: none;

}

/* first level ul style */

.cbp-hrmenu > ul,

.cbp-hrmenu .cbp-hrsub-inner {

    width: 90%;

    max-width: 70em;

    margin: 0 auto;

    padding: 0 1.875em;

}

.cbp-hrmenu > ul > li {

    display: inline-block;

}

.cbp-hrmenu > ul > li > a {

    font-weight: 700;

    padding: 1em 2em;

    color: #999;

    display: inline-block;

}

.cbp-hrmenu > ul > li > a:hover {

    color: #47a3da;

}

.cbp-hrmenu > ul > li.cbp-hropen a,

.cbp-hrmenu > ul > li.cbp-hropen > a:hover {

    color: #fff;

    background: #47a3da;

}

/* sub-menu */

.cbp-hrmenu .cbp-hrsub {

    display: none;

    position: absolute;

    background: #47a3da;

    width: 100%;

    left: 0;

}

.cbp-hropen .cbp-hrsub {

    display: block;

    padding-bottom: 3em;

}

.cbp-hrmenu .cbp-hrsub-inner > div {

    width: 33%;

    float: left;

    padding: 0 2em 0;

}

.cbp-hrmenu .cbp-hrsub-inner:before,

.cbp-hrmenu .cbp-hrsub-inner:after {

    content: » «;

    display: table;

}

.cbp-hrmenu .cbp-hrsub-inner:after {

    clear: both;

}

.cbp-hrmenu .cbp-hrsub-inner > div a {

    line-height: 2em;

}

.cbp-hrsub h5 {

    color: #afdefa;

    padding: 2em 0 0.6em;

    margin: 0;

    font-size: 160%;

    font-weight: 300;

}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {

    .cbp-hrmenu {

        font-size: 80%;

    }

}

@media screen and (max-width: 43em) {

    .cbp-hrmenu {

        font-size: 120%;

        border: none;

    }

    .cbp-hrmenu > ul,

    .cbp-hrmenu .cbp-hrsub-inner {

        width: 100%;

        padding: 0;

    }

    .cbp-hrmenu .cbp-hrsub-inner {

        padding: 0 2em;

        font-size: 75%;

    }

    .cbp-hrmenu > ul > li {

        display: block;

        border-bottom: 4px solid #47a3da;

    }

    .cbp-hrmenu > ul > li > a {

        display: block;

        padding: 1em 3em;

    }

    .cbp-hrmenu .cbp-hrsub {

        position: relative;

    }

    .cbp-hrsub h5 {

        padding-top: 0.6em;

    }

}

@media screen and (max-width: 36em) {

    .cbp-hrmenu .cbp-hrsub-inner > div {

        width: 100%;

        float: none;

        padding: 0 2em;

    }

}

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

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

Создать простое горизантальное меню на CSS не сложно, а довольно просто, нам не потребуется даже использовать JavaScript. Делается это очень просто, поэтому давайте сразу же перейдём к коду.

HTML

1. Создадим разметку кода в html. Дадим меню уникальный id.

CSS

Разметка готова, теперь добавим стили-CSS для неё, не забываем указывать нужное id.


#menu {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-family: Georgia;
	}
#menu li {
	list-style: none;
	float: left;
	height: 33px;
	padding: 0;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #171717;
	position: relative;
	padding-top: 12px;
	}
#menu li ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 150px;
	display: none;
	position: absolute;
	left: 0;
	top: 45px;
	}
#menu li ul li {
	float: none;
	height: 33px;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #7F7F7F;
	}
#menu li a {
	display: block;
	width: 150px;
	height: 33px;
	color: #fff;
	text-decoration: none;
	}
#menu li:hover ul, #menu li:hover ul {
	display: block;
	}
#menu li:hover, #menu li:hover {
	background: #424242;
	}

Просто вставьте этот код и меню будет работать.

Демонстрация:

Вот так просто и создаётся меню, достаточно просто скопировать код и вы увидите такой результат.

Красивое выпадающее меню – несколько примеров меню для сайта

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

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

Моя цель: собрать как можно больше вариантов создания выпадающих меню на этой странице.

В макетах будет использовано:

  • Html
  • CSS
  • JavaScript / jQuery (в редких случаях)

Следите за обновлением страницы.

Для выбора нужного типа или шаблона меню, для сайта, воспользуйтесь навигацией по странице:

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

к менюПожалуй, начнем мы с этой темы, ведь обычно в шапке сайта делают именно горизонтальное меню. Для начала поговорим о меню для сайта на чистом CSS + HTML.

Горизонтальное меню CSS

Ни для кого не секрет, что CSS 3 и HTML 5 шагнули далеко за границы своих предшественников. Например:

сегодня вам не нужно извращаться с вырезанием округленных уголков для меню, достаточно воспользоваться простым CSS свойством border-radius

хотя еще 5 — 10 лет назад резали мы картинки и собачили их как угодно :-).

Ладно, достаточно лирики. Главное, это тот факт, что современные браузеры поддерживают CSS 3 и HTML 5.

Горизонтальное выпадающее меню на css делается с помощью псевдокласса :hover. При чем ранее, браузеры навешивали это событие исключительно на тег <a> и <button>. Сегодня, можно смело использовать этот  псевдокласс CSS практически для всех тегов.

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

Прочитать пост полностью, а также просмотреть исходный код можно в записи: горизонтальное выпадающее меню.

В этом посте вы найдете:

  1. Простое горизонтальное выпадающее меню.
  2. Горизонтальное выпадающее меню на всю ширину.
  3. Выпадающее меню с разделителями.
  4. Многоуровневое выпадающее меню.

Все примеры выпадающих меню построены на списках ul li, я принципиально не использую тег table, так как такое меню не будет универсальным для установки на сайт ВП.

Демо просмотр выпадающее меню для сайта

к менюНажав на картинку, вы можете просмотреть фото пример меню. Нажав на демо, можно посмотреть работу меню.

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

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

 

 

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

 

 

Выпадающее меню с разделителямиВыпадающее меню с разделителями

 

 

Многоуровневое выпадающее менюМногоуровневое выпадающее меню

 

 

Многоуровневое выпадающее меню с выпадашкой на всю ширину

Многоуровневое выпадающее меню с выпадашкой на всю ширину

Все выпадающее меню в примерах работающие, можете проверить их в демке. Более подробно по этой ссылке https://help-wp.ru/gorizontalnoe-vypadayushhee-menu/

 

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

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

Основное описание по созданию таких меню для сайта находится по ссылке вертикальное выпадающее меню. Там вы найдете стили CSS для сайта, а также Html код.

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

vertical-vpm-1Вертикальное выпадающее меню вправо.

 

 

 

vertical-vpm-2Вертикальное выпадающее меню CSS влево

 

 

 

vertical-vpm-3Вертикальное многоуровневое меню

 

Подробно можно прочесть по этой ссылке https://help-wp.ru/vertikalnoe-vypadayushhee-menu/

 

Вертикальное меню аккордеон на jQuery

к менюОдним из самых используемых видов меню, на русскоязычных сайтах, есть вертикальное меню аккордеон.

Кто не в курсе, — это меню раскрывается внутри блока при клике на родительский элемент без перехода по ссылке. Если кликнуть на следующий родительский элемент то предыдущий закроется, а новый будет открываться параллельно.

Предлагаю вам посмотреть 2 вида таких меню:

  • без использования сложных стиле и фонов
  • более красивый с фоновым изображением и картинками указателями.

 

menu-akkordeon-1Простое вертикальное меню аккордеон

 

 

 

menu-akkordeon-2Красивое меню для сайта аккордеон

Детальный код и описание этих меню смотрите по этой ссылке https://help-wp.ru/menu-akkordeon-on-click/

 

Добавить меню для сайта wordpress

к менюОбычно, я рассказываю в своих уроках о CMS WordPress, так как позиционирую себя как специалиста по Вордпресс. В этом уроке, также хотелось бы поговорить о выпадающих меню WP.

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

Хотя, иногда бывают случаи, когда интегрировать html меню у WordPress это сплошной геморой.

Бывает приносят верстку, а там вот такой чудо хтмл код:

<ul>
    <li><a href="#"><span>Пункт </span><span>1</span></a></li>
    <li><a href="#"><span>Пункт </span><span>2</span></a></li>
    <li><span><span>Пункт </span><span>3</span></span></li>
    <li><a href="#"><span>Пункт </span><span>4</span></a></li>
</ul>

Ну и как такое чудо, можно по человечески вставить в WP – по сути без переделки никак. Ну и начинается возня с заказчиком. Он же верстку в Равшана с Джамшутом заказал, так сказать бюджетный вариант на базе говнокода.

В этой записи можно посмотреть как правильно в wordpress добавить меню. Конкретно в этом посте нас интересует работа функции wordpress:

wp_nav_menu()

Все примеры выше, выпадающее меню на списках, идеально подходят для установки на wordpress.

Краткая инструкция выпадающее меню wordpress – установка

1) к менюНаходим подходящий для себя шаблон меню выше.

2) Скачиваем пример к себе на комп, разархивируем его.

3) На место, где будет выводится меню устанавливаем хтмл код, который отвечает за меню. Он начинается и заканчивается в моих примерах тегом <nav></nav> (тег и идентификатор обязательные для копирования, иначе стили не будут работать)

4) Если у примера есть javascript, его нужно подключить в ваш шаблон. Библиотеку jQuery подключать не нужно, так как она у WP подключается автоматически. Главное добавлять код после функции wp_head().

5) Стили из примера нужно скопировать у файл style.css вашей темы.

Стили для body и контейнера можно не копировать.

6) Для вывода меню используем функцию wp_nav_menu(), ее нужно вставить вместо хтмл который находится между <nav> и </nav>.

7) Меню для сайта нужно предварительно зарегистрировать в functions.php а также создать на сайте. Как это делается можно прочесть по ссылке: https://help-wp.ru/wordpress-menu/

 

На этом у меня все, в качестве спасибо можно поделиться ссылкой со своими друзьями в соц. сетях:

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

 

Комментарии к записи «Красивое выпадающее меню – несколько примеров меню для сайта»:

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

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

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

Если немного изменить, то должно получиться примерно следующее, что уже прописано в стилях:

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

После того, как мы применили CSS, у нас должно получиться что-то вроде этого:

Чтобы добавить многоуровневые выпадающие списки, мы повторим тот же процесс. Мы выбираем пункт меню, в который хотим добавить новое раскрывающееся меню, и добавим новый ul между li этого пункта меню.

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

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

Как ранее говорили в этом материале, здесь используем псевдоэлемент CSS3, где :only-child в нашем случае это проверяет, есть ли у родительского элемента какие-либо другие элементы внутри других тегов li, если нет, то он удаляет плюс +, который добавляется по умолчанию.

И вот как должен выглядеть конечный результат:

Приступаем к установке:

HTML

Чтобы добавить раскрывающийся список к одному элементу, здесь прописываем ul внутри li, где мы хотим вывести его.

Код

<nav>
  <ul>
  <li><a href=»#»>Главная</a></li>
  <li><a href=»http://zornet.ru»>Zornet.Ru</a>
  <ul>
  <li><a href=»#»>Стили CSS</a></li>
  <li><a href=»#»>Скрипты сайта</a></li>
  <li><a href=»#»>Шаблоны ресурса</a>
  </li>
  </ul>
  </li>
  <li><a href=»#»>Стилистика CSS</a></li>
  <li><a href=»#»>Раскрутка SEO</a></li>
  <li><a href=»#»>Дизайн</a></li>
  <li><a href=»#»>Связь</a></li>
  </ul>
</nav>


Как вы можете видеть в приведенном коде, где был добавлен неупорядоченные списки с несколькими элементами списка во втором li, что в этом случае является элементом меню. Здесь обязательно нужно обратить внимание на добавление ul, что прописан после тега привязки.

Осталось прописать стиль CSS, где все элементы по умолчанию все скрыты, где их появление будет, как только тогда, когда у нас есть над родительским элементом.

Поэтому добавьте следующее после вышеуказанного CSS:

Код

nav {
  margin: 0px 0;
  background-color: #c14018;
  width: 100%;
}

nav ul {
  padding:0;
  margin:0;
  list-style: none;
  position: relative;
  }

nav ul li {
  margin: 0px 0px 0 0;
  display: inline-block;
  background-color: #c1411a;
}

nav a {
  display: block;
  padding: 0 17px;
  color: #f5eeee;
  font-size: 19px;
  line-height: 59.9px;
  text-decoration: none;
}

nav a:hover {
  background-color: #69240e;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

nav ul li:hover > ul {
  display:inherit;
}

nav ul ul li {
  min-width:168px;
  display:list-item;
  position: relative;
}

nav ul ul ul {
  position: absolute;
  top:0;
  left:100%;
}

li > a:after { content: ‘ +’; }
li > a:only-child:after { content: »; }


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

Многие используют jQuery для достижения этого эффекта раскрывающееся списка, где аналогично используются совершенно другие методы CSS стилей. Вы предпочитаете создавать свои выпадающие списки, что помощью CSS или jQuery.

Позвольте мне знать в комментариях ниже.

Демонстрация

Выпадающее меню на HTML и CSS

Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

  1. Вертикальное выпадающее меню
  2. Горизонтальное выпадающее меню с одним уровнем вложенности
  3. Горизонтальное меню с несколькими уровнями вложенности

Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось. 

<ul>
  <li><a href="#">пункт 1</a>
    <ul>
      <li><a href="#">пункт 1.1</a></li>
      <li><a href="#">пункт 1.2</a></li>
    </ul>
  </li>
  <li><a href="#">пункт 2</a>
    <ul>
      <li><a href="#">пункт 2.1 многа букаф</a></li>
      <li><a href="#">пункт 2.2</a>
        <ul>
          <li><a href="#">пункт 2.2.1</a></li>
          <li><a href="#">пункт 2.2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">пункт 3</a></li>
  <li><a href="#">пункт 4</a></li>
  <li><a href="#">пункт 5</a></li>
</ul>

HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать — скрыть вложенные пункты.

ul.nav li ul {display: none;}

Ещё нужно убрать маркеры но это дело вкуса.

ul.nav li {list-style: none;}

Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >

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

В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.

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

/* Вертикальное выпадающее меню*/
body{
  background: #DCDCDC;
}
/*блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border: 1px solid #FFFFFF;
  list-style: none;
  width: 150px;         /*ширина блока меню*/
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}

/*Выпадающее меню*/

ul.nav li:hover {
  /* позиционирование вложенных элементов
   * будет расчитыватьться относительно
   * родительского элемента
   */
  position: relative;
  background: yellow;
}
ul.nav li:hover > ul {
  display: block;
}
ul.nav li:hover ul{
  position: absolute;
  top: 0;       /*Задаём координаты для вложенных пунктов*/
  left: 150px; /*меню раскрывается вправо*/
}

Вот что должно получиться в результате. демка

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

Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным. Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

/*Горизонтальное выпадающее меню с одним уровнем вложенности*/

body{
  background: #DCDCDC;
}

/* Блок меню*/

ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav li:hover {
  background: yellow;
}
/*Выпадающее меню*/
ul.nav {
  position: relative;
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}
ul.nav li:hover > ul {
  background: #D0E0FF;
  border-top: 1px solid white;
  display: block;
  width: 600px;
  position: absolute;
  top: 30px;
  left: 0;
}

Вот что получиться в итоге демка.

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

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

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

body{
  background: #DCDCDC;
}

/* Блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav { /*задаём высоту и ширину меню*/
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}

/*Выпадающее меню*/

ul.nav li:hover {
  background: yellow;
  position: relative;
}
ul.nav li:hover > ul {
  border-top: 1px solid white;
  display: block;
  position: absolute;
  top: 30px; /*первый уровень меню раскрывается вниз*/
  left: 0;
}
/*Второй и последующие уровни вложенности*/
ul.nav li ul li{
  border-bottom: 1px solid white;
  height: auto;
  width: 150px;
}
ul.nav li:hover ul li ul{
  position: absolute;
  top: 0;
  left: 150px; /*второй и последующие уровни расскрываются вправо*/
}

Вот так будет выглядеть наше многоуровневое меню демка.

Горизонтальное многоуровневое меню

Выпадающее горизонтальное меню с поиском на CSS3 и HTML5

Лого SiteHere.ru