Разметка
Выпадающее меню на 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;
}