樣式
舉例請看淘寶首頁的菜單，比如鼠標懸浮商品分類或者網站導航的菜單效果。類似如下。具體內容不重要，重要的是其樣式。
剖析
表現
1，當鼠標懸停時，彈出另外一個“蒙層”，展示菜單。
2，此時，主標題右側的三角形翻轉180度
技術分析
1，鼠標懸停:hover。css即可實現。
2，將需要展示的菜單包裹在div裏。默認爲display:none;z-index: 10001(只要在該底層圖片之上即可);設置絕對定位，設置將要顯示的地方
3，當hover時，設置爲display:block
4，右邊的三角形。css3動畫設計。transform:rotate(180deg);
源碼
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
dl dt dd{margin: 0;padding: 0;}
.quick-menu{display: inline;margin: 0 auto;}
a{text-decoration: none;color: black;}
a:hover{text-decoration: none;color: red}
.menu{display: none;}/*默認不顯示*/
.services:hover .menu{display: block;}/*懸停時，顯示。注意層級關係*/
div .last {border-width: 0;}/*最後一行不要線條*/
dl {padding: 5px 0 5px 0;border-bottom: #e5e5e5 1px solid}
dt {font-weight: bold; color: #8c8c8c; line-height: 1.5; text-align: left}/*粗線條*/
dd {line-height: 1.4em; text-align: left}
dd a {margin-right: 2px}
b {border: white 9px solid; border-top: black 9px solid;width: 0;height: 0;line-height: 0;position: absolute; -webkit-transition: -webkit-transform 0.2s ease-in;}
.menu-hd:hover b{border-color: white;-webkit-transform: rotate(180deg); -webkit-transform-origin: 50% 30%;}
</style>
</head>
<body style="text-align:center">
<ul class=quick-menu>
<li class="services">
<a class="menu-hd" href="#">網站導航<b></b></a>
<div class="menu" style="width: 210px; height: 262px;font-size: 12px;color: #8c8c8c;">
<dl>
<dt><a href="#">購物</a>
<dd>
<a href="#">商城</a> <a href="#">電器城</a> <a href="#">嗨淘</a> <a href="#">全球購</a> <a href="#">跳蚤街</a>
<a href="#">禮物</a> <a href="#">促銷</a> <a href="#">機票</a> <a href="#">彩票</a> <a href="#">創意</a>
</dd>
</dl>
<dl>
<dt><a href="#">門戶</a>
<dd><a href="#">服飾</a> <a href="#">女人</a> <a href="#">美容</a> <a href="#">居家</a> <a href="#">男人</a> <a href="#">數碼</a>
<a href="#">親子</a> <a href="#">時尚</a> <a href="#">試用</a> <a href="#">心得</a> <a href="#">幫派</a> <a href="#">畫報</a>
<a href="#">淘女郎</a> <a href="#">社區</a> <a href="#">寶貝傳奇</a>
</dd>
</dl>
<dl>
<dt><a href="#">淘江湖</a> <a href="#">手機淘寶</a></dt></dl>
<dl>
<dt><a href="#">幫助中心</a>
<dd><a href="#">交易安全</a> <a href="#">維權中心</a></dd></dl>
<dl class=last>
<dd><strong style="font-weight: bold"><a href="#">更多內容</a></strong></dd>
</dl>
</div>
</li>
</ul>
</body>
</html>git地址：