Разметка

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

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

<ul id="hornav">
	<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;
}

 

Чтобы сделать комментарий, нужно авторизоваться на сайте!