CSS下拉式功能表的製作

HTML代碼：

Example Source Code
<div id=”nav”>
<ul>
<li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>我的首頁　
<div class=”list”>
<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=”list”>
<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=”list”>
<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=”list”>
<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。這是變換的關鍵。

Example Source Code
class=”menu2″
onMouseOver=”this.className=’menu1′”
onMouseOut=”this.className=’menu2′”