Скопируйте код кода следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<голова>
<title>Телескопическое меню</title>
<стиль>
<!--
тело{
цвет фона:#ffdee0;
}
#навигация {
ширина: 200 пикселей;
семейство шрифтов: Arial;
}
#навигация > ул {
list-style-type:none;/* Не отображать маркеры*/
поле: 0 пикселей;
отступ: 0 пикселей;
}
#navigation > ul > li {
border-bottom:1px сплошной #ED9F9F;/* Добавить подчеркивание*/
}
#navigation > ul > li > a{
display:block;/* отображение блока*/
отступ: 5 пикселей 5 пикселей 5 пикселей 0,5em;
текстовое оформление: нет;
border-left:12px Solid #711515;/* Толстая красная рамка слева*/
border-right:1px Solid #711515;/* правая тень*/
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
цвет фона:#c11136;
цвет:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* когда указатель мыши проходит над ним */
background-color:#990020;/* Изменить цвет фона*/
color:#ffff00;/* Изменить цвет текста*/
}
/* Стиль CSS для подменю*/
#навигация ул ли ул{
тип стиля списка: нет;
поле: 0 пикселей;
отступ: 0 пикселей 0 пикселей 0 пикселей 0 пикселей;
}
#навигация ul li ul li{
border-top:1px сплошной #ED9F9F;
}
#навигация ul li ul li a{
дисплей: блок;
отступ: 3 пикселя 3 пикселя 3 пикселя 0,5em;
текстовое оформление: нет;
граница слева: 28 пикселей сплошной #a71f1f;
правая граница: 1 пиксель сплошной #711515;
}
#навигация уль li ul li a:link, #навигация ul li ul li a:visited{
цвет фона:#e85070;
цвет:#FFFFFF;
}
#навигация уль уль уль li a:hover{
цвет фона:#c2425d;
цвет:#ffff00;
}
#navigation ul li ul.myHide{ /* Скрыть подменю*/
дисплей: нет;
}
#navigation ul li ul.myShow{ /* Показать подменю*/
дисплей: блок;
}
-->
</стиль>
<script Language="JavaScript">
изменение функции(){
//Находим родственный элемент ul через родительский элемент li
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS заменяется поочередно для реализации отображения и сокрытия
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
еще
oSecondDiv.className = "myHide";
}
window.onload = функция(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;//дочерние элементы
вар оА;
for(var i=0;i<aLi.length;i++){
//Если дочерним элементом является li, и у этого li есть подменю ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;//Находим гиперссылку
oA.onclick = изменить;//Динамически добавить функцию щелчка
}
}
}
</скрипт>
</голова>
<тело>
<div id="навигация">
<ul id="listUL">
<li><a href="#">Главная страница</a></li>
<li><a href="#">Новости</a>
<ул>
<li><a href="#">Последние новости</a></li>
<li><a href="#">Все новости</a></li>
</ul>
</li>
<li><a href="#">Спорт</a>
<ул>
<li><a href="#">Баскетбол</a></li>
<li><a href="#">Футбол</a></li>
<li><a href="#">Волейбол</a></li>
</ul>
</li>
<li><a href="#">Погода</a>
<ул>
<li><a href="#">Погода на сегодня</a></li>
<li><a href="#">Прогноз</a></li>
</ul>
</li>
<li><a href="#">Свяжитесь со мной</a></li>
</ul>
</div>
</тело>
</html>