Кроссбраузерное меню для сайта

Наиболее популярным вариантом создания кроссбраузерного выпадающего меню для сайта можно назвать способ Патрика Гриффитса. Это минимальная HTML-разметка в виде маркированного списка, несколько строк JavaScript`а для совместимости с IE, и красиво оформленный CSS.

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

Теперь посмотрим на разметку HTML-кода. Она достаточно удобная и очень проста:

<ul>
    <li>Первый пункт</li>
    	<ul>
            <li>Подпункт</li>
            <li>Подпункт</li>
            <li>Подпункт</li>
    	</ul>
    </li>
    <li>Второй пункт
    	<ul>
            <li>Подпункт</li>
            <li>Подпункт</li>
            <li>Подпункт</li>
    	</ul>
    </li>
    <li>Третий пункт
    	<ul>
            <li>Подпункт</li>
            <li>Подпункт</li>
            <li>Подпункт</li>
    	</ul>
    </li>
</ul>

Без оформления такая разметка выглядит следующим образом:

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

<style>
    ul { padding: 0; margin: 0; list-style: none; }
</style>

В результате этой несложной операции получаем следующее:

После этого, первый уровень делаем горизонтальным, и задаем фиксированную ширину для пункта меню:

<style>
    li { float: left; width: 100px; }
</style>

Эта операция видоизменяет наше меню к следующему представлению:

Второй уровень будет позиционироваться относительно пунктов первого меню. Для этого необходимо установить параметр position, как relative – для пунктов первого меню, и как absolute – для меню второго уровня:

<style>
    li { position: relative; }
    li ul { position: absolute; }
</style>

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

<style>
    li ul { top: 10px; left: 0; }
</style>

Осталось только скрыть второй уровень:

<style>
    li ul { display: none; }
</style>

И дописать стили, делающие его видимым, при наведении указателя на пункт меню:

<style>
    li:hover ul { display: block; }
</style>

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

Поработав немного со стилями, можно добиться нужного оформления:

Теперь поговорим об IE6. Как некоторые знают, IE6 поддерживает псевдокласс hover только для элементов ссылок (<a></a>), поэтому наше меню в браузере IE6 работать не будет. Для решения этой проблемы можно воспользоваться следующим JavaScript`ом:

<script>
 seozest = function() {
   if (document.all&&document.getElementById) {
   navRoot = document.getElementById("menu");
   for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
     node.onmouseover=function()
        { this.className+=" ie6";}
     node.onmouseout=function()
        { this.className=this.className.replace(" ie6", "");
   }}}}}
 window.onload=seozest;
</script>

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

...
 <ul id="menu">
...

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

<style>
    li.ie6 ul { display: block; }
</style>

Вот, собственно, и всё. Результаты нашей работы можете посмотреть здесь.