Copie el código de código de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<cabeza>
<title>Menú telescópico</title>
<estilo>
<!--
cuerpo{
color de fondo:#ffdee0;
}
#navegación {
ancho: 200 px;
familia de fuentes: Arial;
}
#navegación > ul {
list-style-type:none;/* No mostrar viñetas*/
margen: 0px;
relleno: 0px;
}
#navegación > ul > li {
borde inferior: 1px sólido #ED9F9F;/* Agregar subrayado*/
}
#navegación > ul > li > a{
display:block;/* bloquear display*/
relleno: 5px 5px 5px 0,5em;
decoración de texto: ninguna;
border-left:12px solid #711515;/* Borde rojo grueso a la izquierda*/
borde-derecho:1px sólido #711515;/* sombra derecha*/
}
#navegación > ul > li > a:enlace, #navegación > ul > li > a:visitado{
color de fondo:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* cuando el mouse pasa por encima */
background-color:#990020;/* Cambiar el color de fondo*/
color:#ffff00;/* Cambiar color del texto*/
}
/* Estilo CSS para submenú*/
#navegación ul li ul{
tipo de estilo de lista: ninguno;
margen: 0px;
relleno: 0px 0px 0px 0px;
}
#navegación ul li ul li {
borde superior: 1px sólido #ED9F9F;
}
#navegación ul li ul li a{
mostrar:bloquear;
relleno: 3px 3px 3px 0,5em;
decoración de texto: ninguna;
borde izquierdo: 28px sólido #a71f1f;
borde derecho: 1px sólido #711515;
}
#navegación ul li ul li a:enlace, #navegación ul li ul li a:visitado{
color de fondo:#e85070;
color:#FFFFFF;
}
#navegación ul li ul li a:hover{
color de fondo:#c2425d;
color:#ffff00;
}
#navegación ul li ul.myHide{ /* Ocultar submenú*/
pantalla: ninguna;
}
#navegación ul li ul.myShow{ /* Mostrar submenú*/
mostrar:bloquear;
}
-->
</estilo>
<lenguaje de escritura="javascript">
cambio de función(){
// Encuentra el elemento hermano ul a través del elemento padre li
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS se reemplaza alternativamente para realizar visualización y ocultación
if(oSecondDiv.className == "miOcultar")
oSecondDiv.className = "miShow";
demás
oSecondDiv.className = "myHide";
}
ventana.onload = función(){
var oUl = document.getElementById("listaUL");
var aLi = oUl.childNodes;//elementos secundarios
var oA;
for(var i=0;i<aLi.length;i++){
//Si el elemento hijo es li, y este li tiene un submenú ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;//Encontrar el hipervínculo
oA.onclick = change;//Agregar dinámicamente la función de clic
}
}
}
</script>
</cabeza>
<cuerpo>
<div id="navegación">
<ul id="listaUL">
<li><a href="#">Inicio</a></li>
<li><a href="#">Noticias</a>
<ul>
<li><a href="#">Últimas noticias</a></li>
<li><a href="#">Todas las noticias</a></li>
</ul>
</li>
<li><a href="#">Deportes</a>
<ul>
<li><a href="#">Baloncesto</a></li>
<li><a href="#">Fútbol</a></li>
<li><a href="#">Voleibol</a></li>
</ul>
</li>
<li><a href="#">Clima</a>
<ul>
<li><a href="#">El tiempo de hoy</a></li>
<li><a href="#">Previsión</a></li>
</ul>
</li>
<li><a href="#">Contáctame</a></li>
</ul>
</div>
</cuerpo>
</html>