HoverTree帶說明的CSS菜單:純HTML+CSS結構鏈接帶說明的黃色導航
在線體驗效果:http://hovertree.com/texiao/css/1.htm
代碼如下,保存到HTML文件可以看到效果:
<!DOCTYPE html >
<html >
<head>
<title>HoverTree帶說明的CSS菜單-hovertree.com</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css/1/hovertreemenu.css" />
</head>
<body>
<div style="width:970px;margin:0px auto;"><h2>HoverTree菜單 - 帶說明的CSS菜單</h2>
純HTML+CSS結構鏈接帶說明的黃色導航 <a href="http://hovertree.com/hvtart/bjae/5w5svpu4.htm">原文</a> <a href="http://hovertree.com">何問起</a> <a href="http://hovertree.com/texiao/">特效庫</a></div>
<div class="hovertree-menu">
<ul>
<li> <a href="http://hovertree.com/menu/jquery/">
jQuery
<div class="info">學習jQuery的好地方,從入門到精通,資料大全。</div>
</a> </li>
<li> <a href="http://hovertree.com/texiao/">
網頁特效
<div class="info">各種網頁特效,jQuery,JS,CSS,HTML5等等。。。</div>
</a> </li>
<li> <a href="http://hovertree.com/menu/aspnet/">
ASP.NET
<div class="info">ASP.NET 資料庫,代碼大全。</div>
</a> </li>
<li> <a href="http://hovertree.com/hvtart/bjae/1d2c278a117f94ca.htm">
jQuery下載
<div class="info">各個版本的jQuery下載。</div>
</a> </li>
<li> <a href="http://hovertree.com/hvtart/bjae/009i1gl6.htm">
相關菜單
<div class="info">純CSS帶說明菜單,另一種風格。</div>
</a> </li>
<li> <a href="http://hovertree.com/menu/javascript/">
JS代碼
<div class="info">格式各樣的JavaScript代碼供你參考。</div>
</a> </li>
<li> <a href="http:///">
<div class="info">Web前端資料,jQuery,HTML5等。</div>
</a> </li>
</ul>
</div>
</body>
</html>
參考:http://hovertree.com/hvtart/bjae/009i1gl6.htm