Кожен, кому доводилося створювати випадаючі меню, знайомий з тим, яку кількість скриптів потрібно для цього. Тим часом, використовуючи грамотно структурований HTML-код і нескладні CSS-правила, можна створити симпатичне меню, що випадає, яке легко змінювати і доповнювати, і при цьому воно буде працювати в безлічі браузерів, в тому числі і в Internet Explorer. І найголовніше для вас, любителі "чистого" коду - ніякого JavaScript! (Насправді, невеликий скрипт все ж таки необхідний, але зовсім не для того, про що ви подумали.) 

Ось приклад діючого меню
Створюємо меню

Першим і найважливішим етапом створення нашого меню є побудова його структури. Найкраще робити це, використовуючи ненумерований список, в якому розміщені підменю, що виступають як списки в рамках пунктів батьківського списку. Звучить мудроване? Фактично це дуже просто:
<ul>
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> About </ a> <ul>
<li> <a href="#"> History </ a> </ li>
<li> <a href="#"> Team </ a> </ li>
<li> <a href="#"> Offices </ a> </ li>
</ Ul>
</ Li>
<li> <a href="#"> Services </ a> <ul>
<li> <a href="#"> WebDesign </ a> </ li>
<li> <a href="#"> Internet Marketing </ a> </ li>
<li> <a href="#"> Hosting </ a> </ li>
<li> <a href="#"> DomainNames </ a> </ li>
<li> <a href="#"> Broadband </ a> </ li>
</ Ul>
</ Li>
<li> <a href="#"> Contact Us </ a> <ul>
<li> <a href="#"> United Kingdom </ a> </ li>
<li> <a href="#"> France </ a> </ li>
<li> <a href="#"> USA </ a> </ li>
<li> <a href="#"> Australia </ a> </ li>
</ Ul>
</ Li>
</ Ul>

Ось так: простий HTML код, доступний і легко редагований.
Наводимо красу

Погляньте на наведений вище приклад. Ви побачите досить нудний перелік елементів. А я обіцяв вам, що він буде симпатичним! Давайте-но додамо трохи стилів.

Першим ділом видалимо відступи і маркери в ненумерований списку, а потім поставимо ширину пунктів меню.

ul (margin: 0; padding: 0; list-style: none; width: 150px;)

Тепер нам треба задати положення елементів списку. На щастя, вони за замовчуванням будуть розташовані вертикально, що нам і потрібно. Проте, нам необхідно задати значення для position як relative, і все тому, що нам потрібно буде відносно їх абсолютно позиціонувати підменю.

ul li (position: relative;)

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

li ul (position: absolute; left: 149px; top: 0; display: none;)

Використовуючи атрибути "left" і "top", ми можемо абсолютно позиціонувати кожне субменю в рамках пункту меню предка. Ви помітите, що я поставив атрибуту "left" значення в 149px (одним пікселем менше, ніж ширина батьківського пункту), це дозволяє субменю перекривати головне меню, не створюючи при цьому подвійний кордону. (Зрозумієте, про що я, трохи пізніше.)

Нам треба також присвоїти атрибуту "display" значення "none", так як ми не хочемо бачити підменю при відкритті сторінки.

Що ж, у нас тепер є каркас , але він все ще виглядає непоказно. Давайте задамо стилі для посилань.

ul li a (display: block; text-decoration: none; color: # 777; background: # fff; padding: 5px; border: 1px solid # ccc; border-bottom: 0;)

Я застосував до посилань стилі за своїм смаком, але їх можна легко поміняти на ті, що вам подобаються. Важливо присвоїти атрибуту "display" значення "block", адже ми хочемо, щоб кожне посилання займала все відведений для неї місце всередині містить її елементи списку.

Отже, виглядає вже трохи краще , хоча користувачі Internet Explorer для Windows можуть з вами і не погодитися. До нещастя, IE Win розуміє розриви рядків між посиланнями в нашому красиво оформленому HTML коді як незаповнені простір. Через це в IE ви бачите, що посилання не прилягають тісно одна до одної. Однак цей баг IE можна обійти.

/ * Fix IE. Hide from IE Mac \ * / * html ul li (float: left;) * html ul li a (height: 1%;) / * End * /

Вище ми застосували трюк Holly Hack, який ховає ці правила від всіх браузерів, крім IE Win. Дуже добре. Зверніть увагу, що було додано правило height: 1%. На жаль (знову!), Борючись з однією помилкою, ми виткнувся на іншу, для боротьби з якого потрібно задати значення для атрибуту "height", щоб посилання відображалися як блокові елементи.

Також зверніть увагу, що ми забули "закрити" блок меню. Додамо додатково нижню межу до кожного елемента списку. Отже, ось повний список стилів для ul:

ul (margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid # ccc;)

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

А тепер - саме веселе. Нам треба зробити так, щоб підменю з'являлися в той момент, коли курсор знаходиться над елементом списку.

li: hover ul (display: block;)

Вуаля! І ось воно - наше меню - у дії.

"Е-моє! Працює!" - Крикне хтось з вас. - "Здорово!"

Добре, добре, але чортів IE / Win знову поламав всю красу - не хоче робити те, що йому сказано. Він розуміє псевдокласс: hover лише для тега <a> - так що li: hover, на який у нас зав'язано поява підменю, йому ні про що не говорить.

" - Ред.): Крапелька JavaScript призведе IE до тями (розрив рядків відзначений символом "» "- Ред.):

startList = function () (if
(Document.all & & document.getElementById) (navRoot =
document.getElementById ("nav"); for (i = 0; i <navRoot.childNodes.length; i + +) (
node = navRoot.childNodes [i]; if (node.nodeName == "LI") (
node.onmouseover = function () (this.className + = "over";)
(" over", ""); } } } } } node.onmouseout = function () (this.className = this.className.replace »(" over "," ");)))))
window.onload = startList;


Отже, правила для hover такі:

li: hover ul, li.over ul (display: block;)

Ми також повинні додатково зв'язати JavaScript з нашим головним списком, додавши це:

<ul id="nav">

Сподіваюся, з огляду на всі вишерассмотренное, кожен з вас зможе побачити спрощену версію чинного меню .
Стрибки меню в IE5.01 для Win

Користувачі IE5.01 для Windows помітять, як меню стрибає навколо при наведенні миші на будь-який з елементів списку. Проблема легко вирішується внесенням змін в наш минулий трюк:

/ * Fix IE. Hide from IE Mac \ * / * html ul li (float: left; height: 1%;) * html ul li a (height: 1%;) / * End * /
Таємничий баг шостої версії IE ...

Працюючи над статтею, я виявив дивний баг, який, як мені здається, спостерігається лише в IE6. Для "li a" необхідно задати фон, інакше якщо випадає підменю буде більше (по висоті), ніж саме батьківське меню, то частина посилань просто зникне з екрана ще до того, як ви зможете клікнути по них. Дивно! Спробуйте побачити це самі.
Створіть своє меню

От і все! Що не суперечить стандартам метод створення красивих горизонтально випадаючих меню. Все, що вам треба зробити - додати кілька ваших стилів для hover, створивши своє меню. щоб дати поштовх вашої фантазії, я додав ще пару штрихів у до меню . Насолоджуйтеся!