Составлем список такого вида :*Час 1
*Час 2
*Минута 2_1
*Минута 2_2
*Минута 2_3
*час 3
*Минута 3_1
*Минута 3_2
*Секунда 3_2_1
*Секунда 3_2_2
*Секунда 3_2_3
*Минута 3_3
Пункт будет содержать:
Ссылку, в коде будет так:
[codebox]
<li><a href="#">Час 1</a></li>
[/codebox]
или список,в коде будет так:
В коде будет так:
[codebox]
<li> <ul> ... </ul> </li>
[/codebox]
Выпадающие подменю это и есть вложеные списки <ul>.
Весь список в коде будет выглядеть так:
[codebox]
<ul id="menu" class="time">
<li><a href="#">Час 1</a></li>
<li>Час 2
<ul>
<li><a href="#">Минута 2_1</a></li>
<li><a href="#">Минута 2_2</a></li>
<li><a href="#">Минута 2_3</a></li>
</ul>
</li>
<li>Час 3
<ul>
<li><a href="#">Минута 3_1</a></li>
<li>Минута 3_2
<ul>
<li><a href="#">Секунда 3_2_1</a></li>
<li><a href="#">Секунда 3_2_2</a></li>
<li><a href="#">Секунда 3_2_3</a></li>
</ul>
</li>
<li><a href="#">Минута 3_3</a></li>
</ul>
</li>
</ul>
[/codebox]
Как видите, список носит ID под названием time. Список включает в себя пункты<li></li>,
пункты включают в себя ссылки <a></a> и "ПОДсписки" <ul></ul>. Это напоминает иерархию папок на диске.
Не правда ли ? Давайте запишем несколько последовательностей. time\<li>\<a> можно и так time\<li>\<ul>
можно и так time\<li>\<ul>\<li>\<a> . Для того чтобы добраться до "Секунд" нужно пройти такой путь -
time\<li>\<ul>\<li>\<ul>\<li>\<a>.
У нас получится набор составляющих нашего меню :
1) .time
2) .time li
3) .time li a -ссылка часы
4) .time li ul
5) .time li ul li
6) .time li ul li a -ссылка минуты
7) .time li ul li ul
8) .time li ul li ul li
9) .time li ul li ul li a -ссылка секунды
Теперь представим что при наведении мышки на елемент, имена превращаются в такой вид имя:hover.
Например если мы наведем мышку на ссылку то ее имя из "a" превратится в "a:hover".
Тоже самое происходит и с другими именами "ul" превращается в "ul:hover" пункт "li" превращается в "li:hover" и тд.
Для того что бы двоеточие не вводило в заблуждение мысленно уничтожайте его. "a"="ahover" "ul"="ulhover" "li"="lihover"
Получается другой набор имен, которые "живут" только если на них навели мышкой.
1) .time:hover - Наведена мышка на "список time"
...
4) .time li:hover ul - наведена мышка на пункт "Часы"
...
7) .time li:hover ul li ul - наведена мышка на пункт "Часы"
7) .time li ul li:hover ul - наведена мышка на пункт "минуты"
...
9) .time li ul li ul li a:hover - Наведена мышка на ссылку "Секунда"
Если у нас есть разные имена, значит для них можно задавать различные стили.
И тут главное понять что #time li:hover ul li ul и #time li ul li:hover ul это один и тот же елемент UL, но
стили для него можно задать различные.
Теперь, когда у нас есть все имена составляющих нашего меню, разработаем для них внешний вид.
[codebox]
.time{
margin:0px;
padding: 0px;
}
.time li
{
display: block;
position: relative;
list-style:none;
width: 100%;
}
.time li ul
{
top: 0px;
display: none;
position: absolute;
width: 100%;
left: 100%;
margin:0px;
padding: 0px;
}
.time li:hover ul li ul, .time li.jshover ul li ul
{
display: none;
}
.time li:hover ul, .time li ul li:hover ul, .time li.jshover ul, .time li ul li.jshover ul
{
display: block;
}
.time li:hover, .time li.jshover
{
background: #ccc;
}
[/codebox]
Заметьте никакой ЯВЫ. Непонятно что это за [codebox] li.jshover [/codebox]
Это горе! Дело в том что шестой уродец IE6 не хочет работать без прививки JS. Поэтому для него пишем :
[codebox]
<script type="text/javascript"><!--//--><![CDATA[//><!--
jsHover = function() {
var hEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0, len=hEls.length; i<len; i++) {
hEls
.onmouseover=function() { this.className+=" jshover"; }
hEls.onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></script>
[/codebox]
Полный листинг файла дам потом если комуто нужно. Хотя копипастом тоже можно.
