<!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>黑白图变成彩色图的css导航_网页代码站(www.webdm.cn)</title>
<style type="text/css">
#menu {position:relative; width:300px; height:300px; background:transparent url(http://www.webdm.cn/images/20090910/menu_bw.jpg);
overflow:hidden; margin:0 auto;}
#menu ul {margin:0; padding:0;}
#menu li {list-style-type:none; width:100px; height:100px; display:inline;}
#menu a {display:block; float:left; width:100px; height:0; overflow:hidden; color:#000; text-decoration:none; padding-top:100px;
background:transparent url(http://www.webdm.cn/images/20090910/menu_col.jpg) no-repeat 500px 500px;}
* html #menu a {height:100px; he\ight:0;}
#menu a#item1:hover {background-position: 0 0; z-index:50;}
#menu a#item2:hover {background-position: -100px 0; z-index:50;}
#menu a#item3:hover {background-position: -200px 0; z-index:50;}
#menu a#item4:hover {background-position: 0 -100px; z-index:50;}
#menu a#item5:hover {background-position: -100px -100px; z-index:50;}
#menu a#item6:hover {background-position: -200px -100px; z-index:50;}
#menu a#item7:hover {background-position: 0 -200px; z-index:50;}
#menu a#item8:hover {background-position: -100px -200px; z-index:50;}
#menu a#item9:hover {background-position: -200px -200px; z-index:50;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="item1" href="#" title="Item 1">Item 1</a></li>
<li><a id="item2" href="#" title="Item 2">Item 2</a></li>
<li><a id="item3" href="#" title="Item 3">Item 3</a></li>
<li><a id="item4" href="#" title="Item 4">Item 4</a></li>
<li><a id="item5" href="#" title="Item 5">Item 5</a></li>
<li><a id="item6" href="#" title="Item 6">Item 6</a></li>
<li><a id="item7" href="#" title="Item 7">Item 7</a></li>
<li><a id="item8" href="#" title="Item 8">Item 8</a></li>
<li><a id="item9" href="#" title="Item 9">Item 9</a></li>
</ul>
</div>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/2e87e209-b8dc-44c6-8946-9f2eb90e9dbe.html