Copie o código do código da seguinte forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<cabeça>
<title>Menu telescópico</title>
<estilo>
<!--
corpo{
cor de fundo:#ffdee0;
}
#navegação {
largura:200px;
família de fontes:Arial;
}
#navegação > ul {
list-style-type:none;/* Não exibe marcadores*/
margem:0px;
preenchimento:0px;
}
#navegação > ul > li {
border-bottom:1px sólido #ED9F9F;/* Adicionar sublinhado*/
}
#navegação > ul > li > a{
display:block;/* bloquear exibição*/
preenchimento: 5px 5px 5px 0,5em;
decoração de texto: nenhum;
border-left:12px sólido #711515;/* Borda vermelha espessa à esquerda*/
borda direita:1px sólido #711515;/* sombra direita*/
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visitou{
cor de fundo:#c11136;
cor:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* quando o mouse passa */
background-color:#990020;/* Alterar a cor de fundo*/
color:#ffff00;/* Alterar cor do texto*/
}
/* Estilo CSS do submenu*/
#navegação ul li ul{
tipo de estilo de lista: nenhum;
margem:0px;
preenchimento:0px 0px 0px 0px;
}
#navegação ul li ul li{
borda superior: 1px sólido #ED9F9F;
}
#navegação ul li ul li a{
exibição: bloco;
preenchimento:3px 3px 3px 0,5em;
decoração de texto: nenhum;
borda esquerda: 28px sólido #a71f1f;
borda direita: 1px sólido #711515;
}
#navegação ul li ul li a:link, #navegação ul li ul li a:visitou{
cor de fundo:#e85070;
cor:#FFFFFF;
}
#navegação ul li ul li a:hover{
cor de fundo:#c2425d;
cor:#ffff00;
}
#navigation ul li ul.myHide{ /* Ocultar submenu*/
exibição: nenhum;
}
#navigation ul li ul.myShow{ /* Mostrar submenu*/
exibição: bloco;
}
-->
</estilo>
<linguagem script="javascript">
mudança de função(){
//Encontre o elemento irmão ul através do elemento pai li
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS é substituído alternadamente para realizar exibição e ocultação
if(oSecondDiv.className == "meuOcultar")
oSecondDiv.className = "meuShow";
outro
oSecondDiv.className = "meuHide";
}
janela.onload=função(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;//elementos filhos
var oA;
for(var i=0;i<aLi.length;i++){
//Se o elemento filho for li, e este li tiver um submenu ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;//Encontre o hiperlink
oA.onclick = change; //Adicionar função de clique dinamicamente
}
}
}
</script>
</head>
<corpo>
<div id="navegação">
<ul id="listUL">
<li><a href="#">Página inicial</a></li>
<li><a href="#">Notícias</a>
<ul>
<li><a href="#">Últimas Notícias</a></li>
<li><a href="#">Todas as notícias</a></li>
</ul>
</li>
<li><a href="#">Esportes</a>
<ul>
<li><a href="#">Basquete</a></li>
<li><a href="#">Futebol</a></li>
<li><a href="#">Vôlei</a></li>
</ul>
</li>
<li><a href="#">Tempo</a>
<ul>
<li><a href="#">Tempo de hoje</a></li>
<li><a href="#">Previsão</a></li>
</ul>
</li>
<li><a href="#">Entre em contato comigo</a></li>
</ul>
</div>
</body>
</html>