任鸟飞网站设计博客

不必借助Javascript，只是简单的利用CSS制作的导航菜单，也能实现很多动态效果。本例中的导航菜单栏能够响应鼠标事件，当鼠标划过时，会有简短的提示信息。

实例预览：

HTML代码：

<div id="menu">
<ul>
<li><a href="http://www.renniaofei.com"> <span class="title">任鸟飞</span> <span class="text">博客简介</span> </a> </li>
<li><a href="http://www.renniaofei.com"> <span class="title">博主</span> <span class="text">博主简介</span> </a> </li>
<li><a href="http://www.renniaofei.com"> <span class="title">博客</span> <span class="text">网页设计类博客</span> </a> </li>
<li><a href="http://www.renniaofei.com"> <span class="title">联系</span> <span class="text">请联系我们</span> </a> </li>
</ul>
</div>

CSS代码：

#menu ul {
	list-style:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1.4em;
	border:2px solid #000;
	border-left:none;
	float:left;
	clear:both;
	padding: 0px;
}
#menu ul li{
    float:left;
}
#menu ul li a{
    display:block;
    text-decoration:none;
    background-color:#444;
    padding:5px 10px;
    color:#fff;
    width:140px;
    border-right:1px solid #666;
    border-left:1px solid #000;
}
#menu ul li a span{
    display:block;
}
#menu ul li a span.title{
    border-bottom:1px solid #444;
}
#menu ul li a:hover span.title{
    border-bottom:1px dashed #f0f0f0;
    color:#ef0000;
}
#menu ul li a span.text{
    visibility:hidden;
    font-size:13px;
    text-align:right;
}
#menu ul li a:hover span.text{
    visibility:visible;
}

利用:hover特性制作的CSS导航菜单栏——最终效果预览

注：由于IE6不支持除a标签以外的:hover属性，故此例在IE6中没有预想中的效果。