鼠标滑过变色的菜单栏_菜单导航特效

鼠标滑过变色的菜单栏，比较适合作企业网站用，大家可以看到有很多企业或公司网站可以看到这种菜单效果，菜单要用到两个GIF图片，请查看演示后自行下载。

<html>
<head>
<title>鼠标滑过变色的菜单栏</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=GB2312" />
<style type="text/css">
<!--
*{
	margin:0;
	padding:0;
}
body{
	background:#FFF; 
	font:12px normal Arial, Helvetica, sans-serif #333;
	line-height:18px;
}
#headerMenu {
	width:560px;
	margin:30px auto;
}
.menu {
	font-size:14px;
	line-height:18px;
    *line-height:32px;
}
.menu li {
	display:inline;
}
.menu a:link,
.menu a:visited{
	display:-moz-inline-stack;/*FF下有效*/
	*display:inline;/*此行及下行为IE定义*/
	zoom:1;
	width:80px;
	padding:8px 0px 6px 0px;
	*padding:0;
	float:left;
	color:#014A99;
    text-align:center;
	text-decoration:none;
	background:url(http://p1.mb5u.com/texiao/bg_menu1.gif);
}
.menu a:hover{
	color:#FFF;
	font-weight:bold;
	background:url(http://p1.mb5u.com/texiao/bg_menu2.gif);
}
.home{
	background:url(http://p1.mb5u.com/texiao/bg_menu2.gif)!important;
	color:#FFF !important;
	font-weight:bold;
}

//-->
</style>
</head>
<body>
<div id="headerMenu">
<ul class="menu">
    <li><a class="home" href="/">网站首页</a> </li>
    <li><a href="#">企业新闻</a> </li>
    <li><a href="#">产品专区</a> </li>
    <li><a href="#">客户服务</a> </li>
    <li><a href="#">资料中心</a> </li>
    <li><a href="#">联系我们</a> </li>
    <li><a href="#">关于我们</a> </li>
</ul>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2011-02-23

[收藏][报错][返回列表]

鼠标滑过变色的菜单栏_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些