Copy kode kodenya sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<kepala>
<title>Menu teleskopik</title>
<gaya>
<!--
tubuh{
warna latar belakang:#ffdee0;
}
#navigasi {
lebar:200 piksel;
font-keluarga:Arial;
}
#navigasi > jalan {
tipe-gaya-daftar: tidak ada;/* Jangan tampilkan poin*/
margin:0 piksel;
bantalan:0 piksel;
}
#navigasi > ul > li {
border-bottom:1px solid #ED9F9F;/* Tambahkan garis bawah*/
}
#navigasi > ul > li > a{
tampilan:blok;/* blok tampilan*/
bantalan:5px 5px 5px 0,5em;
dekorasi teks: tidak ada;
border-left:12px solid #711515;/* Batas merah tebal di sebelah kiri*/
border-right:1px solid #711515;/* bayangan kanan*/
}
#navigasi > ul > li > a:link, #navigasi > ul > li > a:dikunjungi{
warna latar belakang:#c11136;
warna:#FFFFFF;
}
#navigasi > ul > li > a:hover{ /* ketika mouse melewati */
background-color:#990020;/* Mengubah warna latar belakang*/
warna:#ffff00;/* Mengubah warna teks*/
}
/* Gaya CSS untuk submenu*/
#navigasi ul li ul{
tipe gaya daftar: tidak ada;
margin:0 piksel;
bantalan:0px 0px 0px 0px;
}
#navigasi ul li ul li{
perbatasan-atas:1px solid #ED9F9F;
}
#navigasi ul li ul li a{
tampilan:blok;
bantalan:3px 3px 3px 0,5em;
dekorasi teks: tidak ada;
perbatasan-kiri:28px solid #a71f1f;
perbatasan-kanan:1px padat #711515;
}
#navigasi ul li ul li a:link, #navigasi ul li ul li a:mengunjungi{
warna-latar belakang:#e85070;
warna:#FFFFFF;
}
#navigasi ul li ul li a: arahkan kursor{
warna latar belakang:#c2425d;
warna:#ffff00;
}
#navigasi ul li ul.myHide{ /* Sembunyikan submenu*/
tampilan: tidak ada;
}
#navigasi ul li ul.myShow{ /* Tampilkan submenu*/
tampilan:blok;
}
-->
</gaya>
<skrip bahasa="javascript">
perubahan fungsi(){
//Temukan elemen saudaranya ul melalui elemen induk li
var oSecondDiv = ini.parentNode.getElementsByTagName("ul")[0];
//CSS diganti secara bergantian untuk mewujudkan tampilan dan penyembunyian
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "Pertunjukan saya";
kalau tidak
oSecondDiv.className = "myHide";
}
jendela.onload = fungsi(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;//elemen anak
var oA;
for(var i=0;i<aLi.panjang;i++){
//Jika elemen turunannya adalah li, dan li ini mempunyai submenu ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;//Temukan hyperlinknya
oA.onclick = ubah;//Tambahkan fungsi klik secara dinamis
}
}
}
</skrip>
</kepala>
<tubuh>
<div id="navigasi">
<ul id="daftarUL">
<li><a href="#">Beranda</a></li>
<li><a href="#">Berita</a>
<ul>
<li><a href="#">Berita Terkini</a></li>
<li><a href="#">Semua Berita</a></li>
</ul>
</li>
<li><a href="#">Olahraga</a>
<ul>
<li><a href="#">Bola Basket</a></li>
<li><a href="#">Sepak Bola</a></li>
<li><a href="#">Bola Voli</a></li>
</ul>
</li>
<li><a href="#">Cuaca</a>
<ul>
<li><a href="#">Cuaca Hari Ini</a></li>
<li><a href="#">Prakiraan</a></li>
</ul>
</li>
<li><a href="#">Hubungi Saya</a></li>
</ul>
</div>
</tubuh>
</html>