css帶說明信息導航菜單
體驗效果：http://hovertree.com/texiao/css/2.htm
HTML文件代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css帶說明信息導航菜單-何問起</title>
<style>
#hovertreedh *{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
line-height: 1.8;
}
#hovertreedh {
padding: 50px;
}
#hovertreedhbox {
padding: 0px 20px;
background-color: #640000;
}
#center {
background: #ABBAAC;
border-top: 2px solid #333;
padding: 20px;
}
#hovertreedh .c {
clear: both;
height: 1px;
overflow: hidden;
background: #333;
}
#hovertreedhbox li {
border-right: 1px solid #000;
float: left;
margin-right: 1px;
text-align: center;
margin-top: -4px;
}
#hovertreedh a {
width: 100px;
line-height: 28px;
display: block;
}
#hovertreedh a:link, a:visited {
color: #000;
background: #FF9900;
text-decoration: none;
}
#hovertreedh a:hover, a:active {
color: #FFFF00;
background: #000;
}
/*以是下顯示TIP的內容*/
#hovertreedhbox span {
display: none;
}
#hovertreedhbox a:hover span {
display: block;
position: absolute;
border: 1px solid #640000;
background: #FFFFCC;
margin-top: 26px !important;
margin-top: 20px;
color: #000;
padding: 5px;
white-space: nowrap;
}
</style>
</head>
<body>
<div style="width:970px;margin:0px auto;">
<h2>CSS帶說明信息導航菜單</h2>
純HTML+CSS <a href="http://hovertree.com/hvtart/bjae/009i1gl6.htm">原文</a> <a href="http://hovertree.com">何問起</a> <a href="http://hovertree.com/texiao/">特效庫</a>
</div>
<div id="hovertreedh">
<div id="hovertreedhbox">
<ul>
<li><a href="http://hovertree.com"><span>從這裡可以進入何問起首頁！</span>網站首頁</a></li>
<li><a href="http://hovertree.com/menu/texiao/"><span>專注於網頁特效及廣告代碼！</span>網頁特效</a></li>
<li><a href="http://"><span>Web前端資料，jQuery，HTML5等。</span></a></li>
<li><a href="http://hovertree.com/menu/jquery/"><span>學習jQuery的好地方，從入門到精通，資料大全。</span>jQuery</a></li>
<li><a href="http://hovertree.com/guestbook/addmessage.aspx"><span>歡迎來何問起網留言。</span>留言</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/5w5svpu4.htm"><span>也是一個帶說明的菜單，風格不同</span>相關菜單</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/ae553e2f1027d0ff.htm"><span>記得常來哦！</span>您自定義</a></li>
</ul>
<div class="c"></div>
</div>
<div id="center">
</div>
</div>
</body>
</html>