鼠標滑過變色的菜單欄_菜單導航特效

鼠標滑過變色的菜單欄，比較適合作企業網站用，大家可以看到有很多企業或公司網站可以看到這種菜單效果，菜單要用到兩個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   class="x5jzprd"   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訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些