Copiez le code comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<tête>
<title>Menu télescopique</title>
<style>
<!--
corps{
couleur d'arrière-plan :#ffdee0 ;
}
#navigation {
largeur : 200 px ;
famille de polices : Arial ;
}
#navigation > ul {
list-style-type:none;/* Ne pas afficher les puces*/
marge : 0px ;
remplissage : 0 px ;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F;/* Ajouter un soulignement*/
}
#navigation > ul > li > a{
affichage:bloc;/* affichage du bloc*/
remplissage : 5px 5px 5px 0,5em ;
décoration de texte : aucune ;
border-left:12px solid #711515;/* Bordure rouge épaisse à gauche*/
border-right:1px solide #711515;/* ombre droite*/
}
#navigation > ul > li > a:lien, #navigation > ul > li > a:visité{
couleur d'arrière-plan :#c11136 ;
couleur :#FFFFFF ;
}
#navigation > ul > li > a:hover{ /* lorsque la souris passe dessus */
background-color:#990020;/* Changer la couleur d'arrière-plan*/
color:#ffff00;/* Changer la couleur du texte*/
}
/* Style CSS pour le sous-menu*/
#navigation ul li ul{
type de style de liste : aucun ;
marge : 0px ;
remplissage :0px 0px 0px 0px ;
}
#navigation ul li ul li{
bordure supérieure : 1 px solide #ED9F9F ;
}
#navigation ul li ul li a{
affichage:bloc;
remplissage : 3px 3px 3px 0,5em ;
décoration de texte : aucune ;
bordure gauche : 28px solide #a71f1f ;
bordure droite : 1px solide #711515 ;
}
#navigation ul li ul li a:lien, #navigation ul li ul li a:visité{
couleur d'arrière-plan : #e85070 ;
couleur :#FFFFFF ;
}
#navigation ul li ul li a:hover{
couleur d'arrière-plan :#c2425d ;
couleur :#ffff00 ;
}
#navigation ul li ul.myHide{ /* Masquer le sous-menu*/
affichage : aucun ;
}
#navigation ul li ul.myShow{ /* Afficher le sous-menu*/
affichage:bloc;
}
-->
</style>
<langage de script="javascript">
changement de fonction(){
//Trouver l'élément frère ul via l'élément parent li
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS est remplacé alternativement pour réaliser l'affichage et la dissimulation
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow" ;
autre
oSecondDiv.className = "myHide" ;
}
window.onload = fonction(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;//éléments enfants
var oA;
pour(var i=0;i<aLi.length;i++){
//Si l'élément enfant est li, et que ce li a un sous-menu ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;//Trouver le lien hypertexte
oA.onclick = change;//Ajouter dynamiquement une fonction de clic
}
}
}
</script>
</tête>
<corps>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Accueil</a></li>
<li><a href="#">Actualités</a>
<ul>
<li><a href="#">Dernières nouvelles</a></li>
<li><a href="#">Toutes les actualités</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul>
<li><a href="#">Basket-ball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volley-ball</a></li>
</ul>
</li>
<li><a href="#">Météo</a>
<ul>
<li><a href="#">Météo du jour</a></li>
<li><a href="#">Prévisions</a></li>
</ul>
</li>
<li><a href="#">Contactez-moi</a></li>
</ul>
</div>
</corps>
</html>