CSS模拟制作的techweb网站导航特效代码

CSS, techweb, 网站导航, 代码, 特效

用CSS代码，模拟制作techweb网站导航，你需要吗？效果还和真的差不多呢！

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#siteNav {
clear: both;
float:left;
width:750px;
padding-left: 1px;
background: #fff;
font-size:12px;
font-weight: bold;
line-height:normal;
border-bottom:2px solid #84B0C7;
voice-family: "\"}\"";
voice-family: inherit;
width: 749px;
}
#siteNav ul {
margin:0;
padding:0;
list-style:none;
}
#siteNav li {
display:inline;
margin:0;
padding:0;
}
#siteNav a {
float:left;
background:url(http://webclub.net.cn/data/071008/cssbg1.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#siteNav a span {
float:left;
display:block;
background:url(http://webclub.net.cn/data/071008/cssbg2.gif) no-repeat right top;
padding:5px 11px 4px 5px;
color:#036;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#siteNav a span {
float:none
}
/* End IE5-Mac hack */
#siteNav a:hover span {
color:#036;
}
#siteNav a:hover {
background-position:0% -42px;
}
#siteNav a:hover span {
background-position:100% -42px;
}
#siteNav #sel a {
background-position:0% -42px;
}
#siteNav #sel a span {
background-position:100% -42px;
}
-->
</style>
<title>·网络之都·官方论坛‖css预览</title>
</head>
<body>
<div id="siteNav">
<ul>
<li id="sel"><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>
<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>
<li><a href="#">老友记</a></li>
<li><a href="#">滚动</a></li>
<li><a href="#">搜索</a></li>
<li><a href="#">WAP</a></li>
</ul>
</div>
</body>
</html>