您的位置:首页 - 教程 - 网页特效 - 正文
CSS带说明信息导航菜单
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://keleyi.com"><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>

评论: