0元购京东自营斐讯K2路由器返399元活动
置顶

利用:hover特性制作的CSS导航菜单栏

作者:     目录: 小代码     发表: 2010年07月05日

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

实例预览:

利用:hover特性制作的CSS导航菜单栏

HTML代码:

<div id="menu">
<ul>
<li><a href="http://renniaofei.com"> <span class="title">任鸟飞</span> <span class="text">博客简介</span> </a> </li>
<li><a href="http://renniaofei.com"> <span class="title">博主</span> <span class="text">博主简介</span> </a> </li>
<li><a href="http://renniaofei.com"> <span class="title">博客</span> <span class="text">网页设计类博客</span> </a> </li>
<li><a href="http://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中没有预想中的效果。

标签: .

1 个评论

  1. 任鸟飞 says:

    这个导航栏,代码很简单,但是效果很不错,推荐大家看看。

发表评论

电子邮件地址不会被公开。 必填项已用*标注