Html css меню: Горизонтальное меню для сайта

Nadin Web Design CSS Drop Menu

Как мне * действительно * выровнять горизонтальное меню в HTML + CSS?

Для браузеров на базе Gecko я придумал это решение. Это решение не работает с браузерами WebKit (например, Chromium, Midori, Epiphany), они по-прежнему показывают конечный пробел после последнего элемента.

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

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

Код:

<div>
 <p>
  <a href="#">THE&nbsp;MENU&nbsp;ITEMS</a>
  <a href="#">SHOULD&nbsp;BE</a>
  <a href="#">JUSTIFIED</a>
  <a href="#">JUST&nbsp;AS</a>
  <a href="#">PLAIN&nbsp;TEXT</a>
  <a href="#">WOULD&nbsp;BE</a>
  <img src="/Content/Img/stackoverflow-logo-250.png"/>
 </p>
 <p>There's an varying number of text-only menu items and the page layout is fluid.</p>
 <p>The first menu item should be left-aligned, the last menu item should be right-aligned. The remaining items should be spread optimal on the menu bar.</p>
 <p>The number is varying,so there's no chance to pre-calculate the optimal widths.</p>
 <p>Note that a TABLE won't work here as well:</p>
 <ul>
  <li>If you center all TDs, the first and the last item aren't aligned correctly.</li>
  <li>If you left-align and right-align the first resp. the last items, the spacing will be sub-optimal.</li>
 </ul>
</div>

Реплика: Вы заметили, что я обманул? Чтобы добавить элемент-заполнитель пространства, я должен предположить ширину строки меню. Так что это решение не полностью соответствует правилам.

CSS: меню «конфетти»

Меню «конфетти»

Разноцветное меню, которое вы видите ниже, — это просто элемент
DIV с несколькими включёнными внутри него элементами P. Визуальный
эффект объясняется тем фактом, что каждый элемент P спозиционирован
индивидуально и имеет свой собственный шрифт и цвет. Лучше всего
это работает с короткими текстами, потому что визуальный эффект
основан на частичном наложении. Если текст слишком длинный,
перекрывания будут создавать трудности для чтения.

Таблица стилей разрешает до 10 элементов в меню, в примере выше
использованы 8. Вот исходный HTML-код для указанного выше примера:

<div>
<p><a href="../../CSS/#news">Что нового?</a>
<p><a href="../../CSS/#learn">Изучение CSS</a>
<p><a href="../../CSS/#browsers">Браузеры и CSS</a>
<p><a href="../../CSS/#editors">Средства для разработки</a>
<p><a href="../../CSS/#specs">Спецификации</a>
<p><a href="../../CSS/Test">Комплект тестов CSS1</a>
<p><a href="/StyleSheets/Core">Основные стили W3C</a>
<p><a href="http://jigsaw.w3.org/css-validator/">Проверка CSS</a>
</div>

Обратите внимание на наличие класса «map» у элемента DIV, что
превращает его в контейнер для меню, и на атрибуты ID у элементов
P. Каждый элемент P должен иметь (отличающийся) идентификатор ID,
названный p1, p2,… или p10. Необязательно использовать
последовательные имена идентификаторов ID (как показано в примере),
главное, чтобы они были уникальными и не повторялись. Вы можете
использовать эти стили, скопировав их в свою таблицу стилей, или
воспользоваться @import или элементом LINK, чтобы импортировать map.css прямо с сайта W3C: или

@import "http://www.w3.org/Style/map.css";

или

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

Объяснение таблицы стилей

Вот как работает эта таблица стилей. Таблица стилей начинается с
определения элемента DIV, которому присвоен класс «map». Это
создаёт пространство высотой в 190px для размещения содержимого
элементов P. Каждому элементу с идентификаторами ID от p1 до p10
затем будут даны цвет и шрифт. Они также будут спозиционированы
внутри пространства, созданного элементом DIV посредством свойства
‘margin’: отрицательный top margin сдвинет элемент вверх, а
положительный bottom margin даст возможность следующему элементу
отображаться снизу DIVа.

(Слабость этой таблицы в том, что все значения указаны в
пикселях — px. Вы, возможно, захотите изменить это, заменив
процентами, если ваш браузер достаточно хорошо поддерживает CSS)

DIV.map {                        /* Оставляем пространство для ссылок */
  padding-top: 190px;
  margin-left: -2em;             /* Адаптируйте к вашей странице... */
  margin-right: -2em;            /* Адаптируйте к вашей странице... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

Разумеется, вы можете изменить таблицу стилей, чтобы попробовать
другие шрифты, цвета и иное позиционирование, или чтобы создать
дополнительные стилевые правила для более, чем 10 элементов. Также
обратите внимание на левое и правое поля элемента DIV: они
определены отрицательными значениями, чтобы меню стало шире, чем
обтекающий его текст. Но у вашей странице поля могут быть
недостаточно широкими для этого, поэтому вам, возможно, придётся
удалить эти правила из таблицы стилей.

Если вы попробуете этот стиль, вы можете заметить, что он не
очень хорошо работает в Netscape 4. Это вина Netscape 4, конечно.
Тем не менее, таблица стилей map-ns.css — идентична предыдущей и работает хорошо в этом
браузере. Следующий приём в заголовке вашего HTML документа
позволит браузеру Netscape версии 4 и выше адекватно исполнять CSS:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Корректный обработчик CSS прочитает обе таблицы стилей, но
правила во второй таблице переопределят правила из первой, так что
кроме небольшой ненужной работы ничего не произойдет. Netscape 4,
тем не менее, не будет загружать вторую таблицу стилей, потому что
атрибут «media» для него не понятен.

Также, вы, возможно, захотите узнать, почему элементы
позиционируются по отрицательному значению полей, в то время, как
более подходящим решением может показаться использование свойств
абсолютного позиционирования. Действительно, вы можете сделать тоже
самое с ‘position’ и ‘left’ & ‘right’. Причина, по которой данная
таблица стилей использует отступы в том, что такой метод работает в
браузерах, которые поддерживают только CSS1.

Многоуровневое вертикальное меню HTML и CSS

18 ноября, 2015     12 014     1

На днях быстро нужно было сделать простое многоуровневое меню при помощи только css и html. Потратил на поиски минут 15, чего то подходящего что б не переделывать так и не нашел. По этому решил быстрее написать новое чем чистить чужой код. Вот что получилось

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

ul{
	list-style: none;
	background-color: #484f61;
	width: 200px;
	border: 1px solid #2a323f;
	border-bottom: none;
	color: #fff;
}
ul li{
	border-bottom: 1px solid #2a323f;
	position: relative;
}
ul li:hover{
	background-color: #2a323f;
}
ul li:hover ul{
	display: block;
}
ul li:hover ul li ul{
	display: none;
}
ul li a{
	color: #fff;
	padding: 10px 20px;
	display: block;
	text-decoration: none;
	font-weight: bold;
}
ul li a:hover{
	background-color: #5d99cf;
	color: #fff;
}
ul li ul li:hover ul{
	display: block;
}
ul li ul{
	position: absolute;
	left: 200px;
	top: 0px;
	display: none;
}

ul{
list-style: none;
background-color: #484f61;
width: 200px;
border: 1px solid #2a323f;
border-bottom: none;
color: #fff;
}
ul li{
border-bottom: 1px solid #2a323f;
position: relative;
}
ul li:hover{
background-color: #2a323f;
}
ul li:hover ul{
display: block;
}
ul li:hover ul li ul{
display: none;
}
ul li a{
color: #fff;
padding: 10px 20px;
display: block;
text-decoration: none;
font-weight: bold;
}
ul li a:hover{
background-color: #5d99cf;
color: #fff;
}
ul li ul li:hover ul{
display: block;
}
ul li ul{
position: absolute;
left: 200px;
top: 0px;
display: none;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Прайс</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li><a href="#">Услуга 1</a></li>
			<li><a href="#">Услуга 2</a></li>
			<li><a href="#">Услуга 3</a>
				<ul>
					<li><a href="#">Услуга 1</a></li>
					<li><a href="#">Услуга 2</a></li>
					<li><a href="#">Услуга 3</a></li>
					<li><a href="#">Услуга 4</a></li>
					<li><a href="#">Услуга 5</a></li>
				</ul>
			</li>
			<li><a href="#">Услуга 4</a></li>
			<li><a href="#">Услуга 5</a></li>
		</ul>
	</li>
	<li><a href="#">Контакты</a></li>
</ul>

<ul>
<li><a href=»#»>Главная</a></li>
<li><a href=»#»>Новости</a></li>
<li><a href=»#»>Прайс</a></li>
<li><a href=»#»>Услуги</a>
<ul>
<li><a href=»#»>Услуга 1</a></li>
<li><a href=»#»>Услуга 2</a></li>
<li><a href=»#»>Услуга 3</a>
<ul>
<li><a href=»#»>Услуга 1</a></li>
<li><a href=»#»>Услуга 2</a></li>
<li><a href=»#»>Услуга 3</a></li>
<li><a href=»#»>Услуга 4</a></li>
<li><a href=»#»>Услуга 5</a></li>
</ul>
</li>
<li><a href=»#»>Услуга 4</a></li>
<li><a href=»#»>Услуга 5</a></li>
</ul>
</li>
<li><a href=»#»>Контакты</a></li>
</ul>

Вам также может понравиться

72 Меню для сайта на jquery и CSS

1. Вертикальное яркое jQuery меню

2. Прикольный эффект. Танцующее меню.

3. Меню для оформления портфолио

4. Выпадающий список с применением jQuery

Отличная стилизация элемента интерфейса в виде раскрывающегося списка.

5. Выезжающая CSS3 панель

При наведении мышки на кнопку сверху выезжает панель.

6. jQuery плагин «MobilyBlocks» для отображения кругового меню

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

7. Меню с использованием спрайтов

Анимированное javascript меню с эффектом свечения.

8. Анимированное jQuery меню

Свежее симпатичное меню на jQuery.

9. jQuery меню «GarageDoor»

10. jQuery меню с вертикальной прокруткой

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

11. jQuery оформление выпадающего списка

12. Плагин навигации по странице

Плавная прокрутка к нужному разделу на странице. Плагин «jQuery One Page Navigation».

13. Плагин «Animated Content Menu»

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

14. jQuery плагин меню «Sweet Menu»

Анимированное меню с выезжающими пунктами.

15. Фиксированное jQuery меню

При прокрутке страницы вниз, меню остается зафиксировано сверху экрана.

16. Прокручивающиеся меню «Slider Kit»

Для реализации вертикльного меню с большим количеством пунктов. Прокрутка пунктов осуществляется с помощью колеса мыши, либо с помощью ссылок «Previos» и «Next».

17. Стильное CSS3 меню

18. Новое CSS3 меню в стиле Apple

Новое меню в стиле Apple. Выглядит темнее того, что было ранее, но не менее симпатично.

19. Оригинальное jQuery меню

Выпадающее меню с фоновым эффектом. Подпункты меню разворачиваются вверх. При наведении на пункт меню сменяется фоновое изображение.

20. Анимированное меню на jQuery

Анимированное меню. Пункты меню представлены в виде иконок и описания. несколько отличных эффектов при наведении курсора мышки на пункт меню. Предусмотрено 8 эффектов, чтобы посмотреть их все — пройдите по ссылкам Exemple1-Exemple8 на демонстрационной странице.

21. «Scrolling menu» XML меню с прокруткой 

Вертикальное и горизонтально меню с прокруткой. Хорошее решение при большом количестве пунктов в меню.

22. Контекстное меню на сайте на jQuery

Меню всплывает по нажатию правой кнопкой мыши на определенной области.

23. Круговое двухуровневое меню для сайта

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

24. jQuery CSS3 меню с эффектом размытия «Blur Menu» CSS3

Оригинальное jQuery CSS3 меню выполнено в 7 различных стилевых оформлениях. При наведении курсора мыши на один из пунктов меню остальные как бы размываются.

25. Несколько эффектных анимированных jQuery CSS3 меню

10 креативных анимированных меню. Горизонтальные и вертикальные CSS3 меню с различными эффектами и переходами.

26. Анимированное jQuery меню

В архив также вложен исходный PSD файл меню.

27. Меню MagicLine

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

28. Image Bubbles

Отличный эффект, при наведении мышки на одно из изображений. Эффект чем-то напоминает jQDock, описанный выше.

29. Интересное большое jQuery меню

30. jQuery меню

31. Интересные jQuery меню с различными эффектами

Горизонтальное, вертикальное меню. Интересные эффекты.

32. Отличное jQuery меню в стиле Apple

33. Fancy Sliding Menu for Mootools

34. jQuery меню с интересным эффектом

35. Интересное меню jQuery

36. Свежее меню с интересным эффектом на jQuery

37. jQuery меню

Очень интересный эффект. Отлично подойдет для оформления сайтов-портфолио.

38. Графическое меню jQuery

39. Классное jQuery меню в стиле Apple

Интересный эффект выплывающих миниатюр при наведении.

40. Выпадающий список с автоскроллингом

41. Меню jQuery

Симпатичный эффект перехода между пунктами.

42. Отличное jQuery меню

43. Красивое большое jQuery меню

44. Прокручивающиеся jQuery меню

Пункты меню представлены в виде миниатюр.

45. Классное jQuery меню

46. Круговое меню навигации jQuery

47. CSS и jQuery меню

Панель навигации с окном поиска, которая становится полупрозрачной, когда вы прокручиваете страницу вниз.

48. Горизонтальное jQuery меню

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

Отличное вертикально меню. При наведении курсора выплывает пункт меню.

50. Горизонтальное jQuery меню

51. Интересное jQuery меню

Интересный эффект при наведении курсора на пункт меню.

52. Раскрывающееся jQuery меню

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

53. CSS и jQuery панель навигации

Интересный эффект при наведении курсора мыши на пункт меню.

54. Всплывающая jQuery панель

Интересная всплывающая панель/меню с отличными иллюстрованными иконками.  Для появления меню нажмите на плюс в нижнем левом углу экрана.

55. CSS3 меню

Лекгкое CSS меню с интересным эффектом.

56. Выпадающее меню

Простое, аккуратное выпадающее меню.

57. Меню с CSS и jQuery анимацией 

Свежее анимированное меню в серых тонах.

58. Колоночная навигация по сайту на jQuery

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

59. jQuery навигация по сайту

Навигация по сайту представлена в виде 4 картин, при наведении на которую вы заметите интересный анимированный эффект.

60. Панель навигации прокручивается вместе с содержимым

Панель навигации. При нажатии на стрелку происходит прокрутка страницы. Навигация прокручивается вместе с содержимым страницы.

61. jQuery панель с различными социальными сервисами

Нижняя панель на jQuery с различными социальными виджетами (RSS-подписка, возможность поделиться материалом в социальных сетях либо добавить в закладки, последние записи в твиттере, форма обратной связи, YouTube канал). Все виджеты отображаются во всплывающих модальных окнах. 

62. Аккуратное анимированное jQuery меню

63. jQuery меню «Акварельные кисти»

Демо

OJS 3: выпадающее меню в сайдбаре

Уважаемые коллеги, в данном материале мы расскажем о том, как можно сравнительно быстро и просто добавить на сайт Open Journal Systems 3 красивое выпадающее меню.

Меню можно отобразить в боковой панели сайта (сайдбаре). Хорошо подойдет для архива, политик журнала или размещения любой другой информации на всех страницах сайта. Подойдет для базового шаблона OJS.

Образец меню Вы можете посмотреть на одном из наших сайтов.

1. Загружаем файл JS со скриптом

Вначале нужно взять файл menu.js и поместить в директорию «js» вместе с остальными скриптами. Директория находится в корне сайта. В результате должен получиться такой путь к файлу js/menu.js

Далее устанавливаем из галереи плагинов OJS Custom Header Plugin

Для этого в административной панели OJS идем: Settings >>> Website >>> Plugins >>> Plugin Gallery… нажимаем на название плагина и во всплывающем окне кнопку Install

Далее идем на страницу со всеми установленными плагинами Settings >>> Website >>> Plugins, находим и активируем Custom Header Plugin. После этого нажимаем треугольник и Settings…

Будет всплывающее окно. В нем нужно прописать следующий код:

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script src="https://abg-journal.com/js/menu.js"></script>

Вместо abg-journal.com нужно прописать Ваш сайт.

2. Добавляем HTML код в боковую панель

Код для меню в боковой панели можно взять из файла menu.html. Ссылки и названия элементов меню — заменить на собственные. Ниже представлена html разметка для меню в боковой панели:

<div>
<ul>
<li><a href="https://abg-journal.com/index.php/journal/issue/archive">ARCHIVE</a></li>
<li><a href="#">2018</a>
<ul>
<li><a href="https://abg-journal.com/index.php/journal/issue/view/6">Vol 56 (2018)</a></li>
<li><a href="https://abg-journal.com/index.php/journal/issue/view/5">Vol 55 (2018)</a></li>
</ul>
</li>
<li><a href="#">2017</a>
<ul>
<li><a href="https://abg-journal.com/index.php/journal/issue/view/vol54">Vol 54 (2017)</a></li>
<li><a href="https://abg-journal.com/index.php/journal/issue/view/vol53">Vol 53 (2017)</a></li>
</ul>
</li>
<li><a href="#">2016</a>
<ul>
<li><a href="https://abg-journal.com/index.php/journal/issue/view/vol52">Vol 52 (2016)</a></li>
<li><a href="https://abg-journal.com/index.php/journal/issue/view/vol51">Vol 51 (2016)</a></li>
</ul>
</li>
<li><a href="https://abg-journal.com/index.php/journal/issue/archive">ALL ARCHIVE</a></li>
</ul>
</div>

Код HTML добавляется в пользовательский блок. Для этого идем: Settings >>> Website >>> Plugins >>> Custom Block Manager… нажимаем Manage Custom Blocks

Добавляем новый блок — Add Block, в который вносим сформированный HTML код и сохраняем результат.

Для каждой языковой версии сайта можно сделать отдельный блок с элементами меню на локальных языках.

3. Добавляем стиль CSS для оформления меню

Чтобы придать нашему меню красивый внешний вид, нужно воспользоваться файлом menu.css. Код из этого файла можно добавить в пользовательскую таблицу стилей прямо из административной панели OJS. Для этого идем Settings >>> Website >>> Appearance. Находим блок Journal style sheet и загружаем файл menu.css с Вашего ПК.

Если Вы уже внесли какие-нибудь пользовательские стили оформления сайта, то вместо прямой загрузки файла нужно взять из него код и добавить к существующему файлу styleSheet.css.

Чтобы быстро перекрасить меню в другой цвет (сейчас — зеленый), нужно найти и заменить значение background всего в трех строках:

одно значение для строки с цветом:

background: #298a32;

и два значение для строк с цветом:

background: #2d9637;

Результат

Данный материал был сделан на основе TUTORIAL ANIMASI MENU OJS 3.1

Благодарим автора Ade Cahya, S.Kom за исходники. С уважением. Участники проекта OSU.

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

Разметка

Выпадающее меню на CSS основано на псевдоклассе :hover. Когда проводим мышкой над элементом списка li действие правил применяется к предварительно скрытому списку ul. В IE6 нужно использовать дополнительно js, потому как он не понимает псевдокласс у элемента списка.

Код меню в HTML выглядит примерно так:

<ul>
	<li><a href="#null">Домой</a></li>
	<li><a href="#null">Каталог</a>
		<ul>
			<li><a href="#null">Вся продукция</a>
				<ul>
				<li><a href="#null">По дате</a></li>
				<li><a href="#null">Производители</a></li>
				<li><a href="#null">Другое</a></li>
				</ul>
			</li>
		</ul>
	</li>
 ...
</ul>

Применяем такой стиль:

#hornav li {
	float:left;
	position:relative;
}
#hornav li ul {
	position:absolute;    
        opacity:0;
        left:-9999px;
}

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

Правило для отображения скрытого списка будет таким, зачем нужен класс jshover будет видно ниже:

#hornav li:hover ul, #hornav li.jshover ul { 
	opacity:1;
        left:0px;
	-webkit-transition:0.25s linear opacity;
	transition:0.25s linear opacity;
        -moz-transition:0.25s linear opacity;
        -o-transition:0.25s linear opacity;
}

Второй уровень меню будет выпадать вниз.

Третий в сторону. Для этого для третьего уровня прописываем такое правило:

#hornav li:hover li ul, #hornav li.jshover li ul {
	opacity:0;
        left:-9999px;
	width:138px;
	top:-9px;
	left:133px;
}
#hornav li:hover li:hover ul {
	opacity:1;	
        -webkit-transition:0.25s linear opacity;
        transition:0.25s linear opacity;
        -moz-transition:0.25s linear opacity;
        -o-transition:0.25s linear opacity;
}

138px — это ширина второго уровня.

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

<script type="text/javascript">
 jsHover = function() {
 var hEls = document.getElementById("hornav").getElementsByTagName("LI");
 for (var i=0, len=hEls.length; i<len; i++) {
 hEls[i].onmouseover=function() { this.className+=" jshover"; }
 hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
 }
 }
 if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>

Получается, что в ИЕ6 вместо псевдокласса :hover используется класс jshover, который назначается скриптом.

И CSS еще все вместе с некоторыми добавлениями:

#hornav ul {
	height:30px;
}
#hornav li {
	float:left;
	position:relative;
	height:30px;
}
#hornav li a{
	display:inline-block;
	display:block;
	height:30px;
}
#hornav li:hover,#hornav li.jshover,#hornav li.active{
 
}
/* 1 level */
#hornav li li{
	float:none;
	height:auto;
}
#hornav li li a{
	height:auto;
}
#hornav li ul {
	position:absolute;         
	opacity:0;
	left:-9999px;
 
	-webkit-box-shadow:2px 5px 7px #161617;
	box-shadow:2px 5px 7px #161617;
	-moz-box-shadow:2px 5px 7px #161617;
 
	width:240px;
	height:auto;
	z-index:1000;
}
#hornav li:hover ul, #hornav li.jshover ul { 
	opacity:1;
	top:30px;
	left:0px;
 
	-webkit-transition:0.25s linear opacity;
	transition:0.25s linear opacity;
	-moz-transition:0.25s linear opacity;
	-o-transition:0.25s linear opacity;
}
#hornav li:hover li,#hornav li.jshover li{
 
}
#hornav li:hover li:hover, #hornav li:hover li.active,#hornav li.jshover li.jshover, #hornav li.jshover li.active{
 
}
 
 
/* 2 level */
#hornav li:hover li:hover ul,#hornav li.jshover li.jshover ul {
	opacity:1;
	top:0px;
	left:240px;
 
	-webkit-transition:0.25s linear opacity;
	transition:0.25s linear opacity;
	-moz-transition:0.25s linear opacity;
	-o-transition:0.25s linear opacity;
}

: элемент раздела навигации — HTML: язык разметки гипертекста

HTML-элемент