HTML代码：
Contoh Kode Sumber
<div id=”nav”>
<ul>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>我的首页
<div class=”daftar”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>社区圈子
<div class=”daftar”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>我的短信
<div class=”daftar”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>账户管理
<div class=”daftar”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
</ul>
</div>
大家特别留意类似于以下代码的HTML。这是变换的关键。
Contoh Kode Sumber
kelas=”menu2″
onMouseOver=”ini.className='menu1′”
onMouseOut=”this.className='menu2′”
下面看CSS代码：
Contoh Kode Sumber
tubuh{
warna latar belakang:putih;
ukuran font:12px;
keluarga font:Arial, Helvetica, sans-serif;
margin:0 piksel;
bantalan:0 piksel;
warna: putih;
}
ul,li{
margin:0 piksel;
bantalan:0 piksel;
}
li{
tampilan: sebaris;
gaya daftar: tidak ada;
posisi-gaya-daftar:luar;
perataan teks:tengah;
berat font: tebal;
mengapung:kiri;
}
a:tautan{
warna:#336601;
dekorasi teks: tidak ada;
mengapung:kiri;
lebar:100 piksel;
bantalan:3px 5px 0px 5px;
}
a:mengunjungi{
warna:#336601;
dekorasi teks: tidak ada;
mengapung:kiri;
bantalan:3px 5px 0px 5px;
lebar:100 piksel;
}
a: arahkan kursor{
warna:putih;
mengapung:kiri;
bantalan:3px 3px 0px 20px;
lebar:88 piksel;
dekorasi teks: tidak ada;
warna latar belakang:#539D26;
}
a: aktif{
warna:putih;
mengapung:kiri;
bantalan:3px 3px 0px 20px;
lebar:88 piksel;
dekorasi teks: tidak ada;
warna latar belakang:#BD06B4;
}
#navigasi{
lebar:600 piksel;
tinggi:30 piksel;
batas-bawah:0px;
bantalan:0px 5px;
posisi:mutlak;
indeks-z:1;
kiri: 198 piksel;
atas: 25 piksel;
}
.daftar{
tinggi garis:20px;
perataan teks:kiri;
bantalan:4 piksel;
berat font:normal;
}
.menu1{
lebar:120 piksel;
tinggi:otomatis;
margin:6px 4px 0px 0px;
batas:1 piksel padat #9CDD75;
warna latar belakang:#F1FBEC;
warna:#336601;
bantalan:6px 0px 0px 0px;
kursor:tangan;
overflow-y:tersembunyi;
penyaring:Alfa(opasitas=70);
-moz-opasitas:0,7;
}
.menu2{
lebar:120 piksel;
tinggi:18 piksel;
margin:6px 4px 0px 0px;
warna latar belakang:#F5F5F5;
warna:#999999;
batas:1 piksel padat #EEE8DD;
bantalan:6px 0px 0px 0px;
overflow-y:tersembunyi;
kursor:tangan;
}