青灰色鼠标滑过换色很大气的一款导航菜单代码

代码简介:

一款青灰色导航菜单,很大气,鼠标滑过后更换菜单背景图,本菜单用到四张背景图,请在查看演示的时候点击鼠标右键自行下载图片,这款菜单兼容性比较好,IE6、IE7、IE8、火狐下都表现不错,希望这就是你想要的哦!

代码内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>青灰色鼠标滑过换色很大气的一款导航菜单代码_网页代码站(www.webdm.cn)</title>
<style>
ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-

transform:uppercase;font-size:12px;font-weight:bold;background:transparent url

("http://www.webdm.cn/images/20090920/bgOFF4.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-

serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
ul#saturday li{display:block;float:left;margin:0;pading:0;}
/* / */
ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 

20px;height:24px;background:transparent url("http://www.webdm.cn/images/20090920/bgDIVIDER4.gif") no-repeat top right;}
ul#saturday li a:hover{background:transparent url("http://www.webdm.cn/images/20090920/bgHOVER4.gif") no-repeat top 

right;}
ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url

("http://www.webdm.cn/images/20090920/bgON4.gif") no-repeat top right;}
</style>
</head>

<body>
	<ul id="saturday">
	<li><a href="http://www.webdm.cn" title="">Home</a></li>
	<li><a href="" title="">About Us</a></li>
	<li><a href="http://www.webdm.cn" title="" class="current">Services</a></li>
	<li><a href="" title="">Our Work</a></li>
	<li><a href="" title="">Contact Us</a></li>
	</ul>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

代码来自:http://www.webdm.cn/webcode/d6df02e1-8ddc-412a-a649-54ff52f877b3.html

posted @ 2011-03-16 10:59  网页代码站  阅读(524)  评论(0编辑  收藏  举报