CSS imitation Taobao home navigation bar layout effect

css| Taobao here is the CSS Content section:

The following is a reference fragment:
<style>
* * www.zishu.cn Mouse/*
body{font-size:12px; text-align:center; margin-top:30px; Font-family:verdana;}
div,img{margin:0; padding:0; border:0;}
Ul,li{list-style-type:none; margin:0; padding:0; float:left;}
#info {margin-left:auto; margin-right:auto;width:760px; text-align:left;}
#new {margin-top:-12px;position:absolute;margin-left:-12px;}
#nav {height:30px; width:610px; margin-left:auto; margin-right:auto;}
#nav li{margin-left:1px; height:30px;}
#nav Li a{display:block;float:left text-decoration:none; Background-image:url (/uploadpic/2007-4/200741141917889. GIF); background-repeat:no-repeat; Display:block; Background-position:left top;}
#nav a span{cursor:hand; color: #000; Background-image:url (/uploadpic/2007-4/200741141927920.gif); background-repeat : No-repeat; Display:block;background-position:right top; padding:7px 10px 6px 10px; Float:left; }
#nav Li A:active, #nav li a:hover {margin-top:0px;}
#nav Li A:active span, #nav li a:hover span {padding:10px 10px 6px 10px; margin-top:0px; display:block; color: #FFF;}
#zishu01 A:link, #zishu01 a:visited {background-position:0px-27px;}
#zishu01 a:link span, #zishu01 a:visited span{background-position:right-27px;padding:10px 10px 6px 10px; margin-top:0; Color: #FFF; Font-weight:bold;}
#zishu02 A, #zishu03 A, #zishu04 A, #zishu05 A, #zishu06 A, #zishu07 A, #zishu08 A, and #zishu09 A, #zishu10 A, #zishu11 the A{margin-top : 3px;}
#zishu02 a:active, #zishu02 a:hover {background-position:0px-57px;}
#zishu02 a:active span, #zishu02 a:hover span{background-position:right-57px;}
#zishu03 a:active, #zishu03 a:hover {background-position:0px-87px;}
#zishu03 a:active span, #zishu03 a:hover span{background-position:right-87px;}
#zishu04 a:active, #zishu04 a:hover {background-position:0px-117px;}
#zishu04 a:active span, #zishu04 a:hover span{background-position:right-117px;}
#zishu05 a:active, #zishu05 a:hover {background-position:0px-147px;}
#zishu05 a:active span, #zishu05 a:hover span{background-position:right-147px;}
#zishu06 a:active, #zishu06 a:hover {background-position:0px-177px;}
#zishu06 a:active span, #zishu06 a:hover span{background-position:right-177px;}
#zishu07 a:active, #zishu07 a:hover {background-position:0px-207px;}
#zishu07 a:active span, #zishu07 a:hover span{background-position:right-207px;}
#zishu08 a:active, #zishu08 a:hover {background-position:0px-237px;}
#zishu08 a:active span, #zishu08 a:hover span{background-position:right-237px;}
#zishu09 a:active, #zishu09 a:hover {background-position:0px-267px;}
#zishu09 a:active span, #zishu09 a:hover span{background-position:right-267px;}
#zishu10 a:active, #zishu10 a:hover {background-position:0px-297px;}
#zishu10 a:active span, #zishu10 a:hover span{background-position:right-297px;}
#zishu11 a:link span, #zishu11 a:visited span{color: #FF6600;}
#zishu11 a:active, #zishu11 a:hover {background-position:0px-327px;}
#zishu11 a:active span, #zishu11 a:hover span{background-position:right-327px;}
#menu {width:760px height:26px; background: #FF9900;}
#r1 {border-top:0px;border-bottom:0px; border-left:3px solid #fff; border-right:3px solid #fff; height:1px; overflow: Hidden;}
#r2 {border-top:0px;border-bottom:0px; border-left:2px solid #fff; border-right:2px solid #fff; height:1px; overflow: Hidden;}
#r3 {border-top:0px;border-bottom:0px; border-left:1px solid #fff; border-right:1px solid #fff; height:1px; Overflow:hidden;}
</style>

here is the Content section:

The following is a reference fragment:
<div id= "Info" >
<div id= "NAV" >
<ul>
<li id= "zishu01" ><a href= "http://www.zishu.cn" ><span> home </span></a></li>
<li id= "zishu02" ><a href= "http://www.zishu.cn" ><span> Digital communications </span></a></li>
<li id= "zishu03" ><a href= "http://www.zishu.cn" ><span> women </span></a></li>
<li id= "zishu04" ><a href= "http://www.zishu.cn" ><span> men </span></a></li>
<li id= "zishu05" ><a href= "http://www.zishu.cn" ><span> home </span></a></li>
<li id= "zishu06" ><a href= "http://www.zishu.cn" ><span> book audio </span></a></li>
<li id= "zishu07" ><a href= "http://www.zishu.cn" ><span> movement </span></a></li>
<li id= "zishu08" ><a href= "http://www.zishu.cn" ><span> games </span></a></li>
<li id= "zishu09" ><a href= "http://www.zishu.cn" ><span> Pets </span></a></li>
<li id= "Zishu10" ><a href= "http://www.zishu.cn" ><span> Hong Kong Street </span></a></li>
<li id= "Zishu11" ><a href= "http://www.zishu.cn" ><span> Taobao Mall </span></a></li>
<li><div id= "new" ></div>< /li>
</ul>
</div>
<div id= "Menu" >
<div id= "R1" ></div>
<div id= "R2" ></div>
<div id= "R3" ></div>
<div></div>
</div>
</div>
<p> Imitation Taobao home navigation bar effect reprint please indicate the source mouse www.zishu.cn 2006-05-21 03:05 minutes </p>

View Effects:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>tao BAO TEST 2</title><style>/* www.zishu.cn */body{mouse font-size:12px;  Text-align:center; margin-top:30px; Font-family:verdana;} div,img{margin:0; padding:0; border:0;} Ul,li{list-style-type:none; margin:0; padding:0; float:left;} #info {margin-left:auto; margin-right:auto;width:760px; text-align:left;} #new {margin-top:-12px;position:absolute;margin-left:-12px;} #nav {height:30px; width:610px; margin-left:auto; margin-right:auto;} #nav li{margin-left:1px; height:30px;} #nav Li a{display:block;float:left text-decoration:none; Background-image:url (/uploadpic/2007-4/200741141917889. GIF); background-repeat:no-repeat; Display:block; Background-position:left top;} #nav a span{cursor:hand; color: #000; backgrounD-image:url (/uploadpic/2007-4/200741141927920.gif); background-repeat:no-repeat; Display:block;background-position:right top; padding:7px 10px 6px 10px; Float:left; #nav Li A:active, #nav li a:hover {margin-top:0px;} #nav Li A:active span, #nav li a:hover span {padding:10px 10px 6px 10px; margin-top:0px; display:block; color: #FFF;} #zishu01 A:link, #zishu01 a:visited {background-position:0px-27px;} #zishu01 a:link span, #zishu01 a:visited span{background-position:right-27px;padding:10px 10px 6px 10px; margin-top:0; Color: #FFF; Font-weight:bold;} #zishu02 A, #zishu03 A, #zishu04 A, #zishu05 A, #zishu06 A, #zishu07 A, #zishu08 A, and #zishu09 A, #zishu10 A, #zishu11 the A{margin-top : 3px;} #zishu02 a:active, #zishu02 a:hover {background-position:0px-57px;} #zishu02 a:active span, #zishu02 a:hover span{background-position:right-57px;} #zishu03 a:active, #zishu03 a:hover {background-position:0px-87px;} #zishu03 a:active span, #zishu03 a:hover span{background-position:right-87px;} #zishu04 a:active, #zishu04 a:hover {background-position:0px-117px;} #zishu04 a:active span, #zishu04 a:hover span{background-position:right-117px;} #zishu05 a:active, #zishu05 a:hover {background-position:0px-147px;} #zishu05 a:active span, #zishu05 a:hover span{background-position:right-147px;} #zishu06 a:active, #zishu06 a:hover {background-position:0px-177px;} #zishu06 a:active span, #zishu06 a:hover span{background-position:right-177px;} #zishu07 a:active, #zishu07 a:hover {background-position:0px-207px;} #zishu07 a:active span, #zishu07 a:hover span{background-position:right-207px;} #zishu08 a:active, #zishu08 a:hover {background-position:0px-237px;} #zishu08 a:active span, #zishu08 a:hover span{background-position:right-237px;} #zishu09 a:active, #zishu09 a:hover {background-position:0px-267px;} #zishu09 a:active span, #zishu09 a:hover span{background-position:right-267px;} #zishu10 a:active, #zishu10 a:hover {background-position:0px-297px;} #zishu10 a:active span, #zishu10 a:hover span{background-position:right-297PX;} #zishu11 a:link span, #zishu11 a:visited span{color: #FF6600;} #zishu11 a:active, #zishu11 a:hover {background-position:0px-327px;} #zishu11 a:active span, #zishu11 a:hover span{background-position:right-327px;} #menu {width:760px height:26px; background: #FF9900;} #r1 {border-top:0px;border-bottom:0px; border-left:3px solid #fff; border-right:3px solid #fff; height:1px; overflow: Hidden;} #r2 {border-top:0px;border-bottom:0px; border-left:2px solid #fff; border-right:2px solid #fff; height:1px; overflow: Hidden;} #r3 {border-top:0px;border-bottom:0px; border-left:1px solid #fff; border-right:1px solid #fff; height:1px; overflow: Hidden;} </style></pead><body><div id= "Info" > <div id= "nav" > <ul> <li id= "zishu01" > <a href= "http://www.zishu.cn" ><span> home </span></a></li> <li id= "zishu02" ><a href= "http://www.zishu.cn" ><span> Digital communications </span></a></li> <li id= "zishu03" ><a Href= "http:www.zishu.cn "><span> women </span></a></li> <li id=" zishu04 "><a href=" http:// www.zishu.cn "><span> men </span></a></li> <li id=" zishu05 "><a href=" http:// www.zishu.cn "><span> home </span></a></li> <li id=" zishu06 "><a href=" http:// www.zishu.cn "><span> book audio </span></a></li> <li id=" zishu07 "><a href=" http:// www.zishu.cn "><span> movement </span></a></li> <li id=" zishu08 "><a href=" http:// www.zishu.cn "><span> Games </span></a></li> <li id=" zishu09 "><a href=" http:// www.zishu.cn "><span> pet </span></a></li> <li id=" Zishu10 "><a href=" http:// www.zishu.cn "><span> Hong Kong street </span></a></li> <li id=" Zishu11 "><a href=" http:// www.zishu.cn "><span> Taobao Mall </span></a></li> <li><div id=" new "></div></li> </ul> </div> <div id=" Menu "> <div id=" R1 "></div> <div id=" R2 "></div> <div id=" R3 "></div> <div> </div> </div></div><p> imitation Taobao home navigation bar effect reprint please indicate the source mouse www.zishu.cn 2006-05-21 03:05 minutes </p></ Body></ptml><script language= "Javascript" > var now = new Date (); document.write (" <noscript>  </ Noscript>