HTML程式碼：
範例原始碼
<div id=”nav”>
<ul>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>我的首頁
<div 類別=”列表”>
<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 類別=”列表”>
<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 類別=”列表”>
<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 類別=”列表”>
<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
。
類別=“選單2”
onMouseOver=”this.className='menu1′”
onMouseOut=”this.className='menu2′」
下面看CSS程式碼：
範例原始碼
身體{
背景顏色：白色；
字體大小：12px；
字型系列：Arial、Helvetica、sans-serif；
邊距：0px；
內邊距：0px；
顏色：白色；
}
ul,li{
邊距：0px；
內邊距：0px；
}
李{
顯示：內嵌；
列表樣式：無；
列表樣式位置：外部；
文字對齊：居中；
字體粗細：粗體；
浮動：左；
}
一個：連結{
顏色：#336601；
文字裝飾：無；
浮動：左；
寬度：100px；
內邊距：3px 5px 0px 5px；
}
a:訪問過{
顏色：#336601；
文字裝飾：無；
浮動：左；
內邊距：3px 5px 0px 5px；
寬度：100px；
}
一個：懸停{
顏色：白色；
浮動：左；
內邊距：3px 3px 0px 20px；
寬度：88px；
文字裝飾：無；
背景顏色：#539D26；
}
一個：活躍{
顏色：白色；
浮動：左；
內邊距：3px 3px 0px 20px；
寬度：88px；
文字裝飾：無；
背景顏色：#BD06B4；
}
#導航{
寬度：600px；
高度：30px；
邊框底部：0px；
內邊距：0px 5px；
位置：絕對；
z 索引：1；
左：198 像素；
頂部：25 像素；
}
。
行高：20px；
文字對齊：左對齊；
內邊距：4px；
字體粗細：正常；
}
.菜單1{
寬度：120px；
高度：自動；
邊距：6px 4px 0px 0px；
邊框：1px實心#9CDD75；
背景顏色：#F1FBEC；
顏色：#336601；
內邊距：6px 0px 0px 0px；
遊標：手；
溢出-y：隱藏；
過濾器：Alpha（不透明度=70）；
-moz-不透明度：0.7；
}
.菜單2{
寬度：120px；
高度：18px；
邊距：6px 4px 0px 0px；
背景顏色：#F5F5F5；
顏色：#999999；
邊框：1px實心#EEE8DD；
內邊距：6px 0px 0px 0px；
溢出-y：隱藏；
遊標：手；
}