仿淘宝首页分类列表效果实现代码

<！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=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;} a{color:blue;} ul{margin:0;padding:0;list-style:none;} #navigation{height:26px;} #navigation li{float:left;} #navigation li.show .content{display:block;} #navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden} #navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;} #container{position:relative;width:800px;margin:50px;} #navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;} #navigation li .content ul li{margin-right:10px;float:none;display:inline;} #navigation li .content ul li a{border:none;} #navigation li .content ul li{width:120px;} #navigation li .content ul li h3{clear:both;text-align:left;} </style> </head> <body><ul id="navigation"> <li><span>拼音索引</span></li> <li> A<h3>阿里山</h3> <ul> <li>阿里山</li> <li>阿里山</li> <li>阿里山</li> <li>阿里山</li> <li>阿里山</li> <li>阿里山</li> </ul> <h3>阿里山</h3> <ul> <li>阿里山</li> <li>阿里山</li> <li>阿里山</li> <li>阿里山</li> </ul></li> <li> B<h3>棒棒糖</h3> <ul> <li>棒棒糖</li> <li>棒棒糖</li> <li>棒棒糖</li> <li>棒棒糖</li> <li>棒棒糖</li> <li>棒棒糖</li> </ul> <h3>棒棒糖</h3> <ul> <li>棒棒糖</li> <li>棒棒糖</li> <li>棒棒糖</li> <li>棒棒糖</li> </ul></li> <li>CC</li> <li>DD</li> <li>EE</li> <li>FF</li> <li>GG</li> <li>HH</li> <li>II</li> <li>JJ</li> <li>KK</li> <li>LL</li> <li>MM</li> <li>NN</li> <li>OO</li> <li>PP</li> <li>QQ</li> <li>RR</li> <li>S[sh]S</li> <li>TT</li> <li>UU</li> <li>VV</li> <li>WW</li> <li>XX</li> <li>YY</li> <li>Z[zh]Z</li> </ul></body> </html> <script type="text/javascript"> function showAjaxContent（）{ var obj=document.getElementById（"navigation"）; var liObj=obj.getElementsByTagName（"li"）; var length=liObj.length; var currentLiObj; for（var i=0;i<length;i++）{ currentLiObj=liObj[i]; if（currentLiObj.parentNode！=obj）{continue;} //然后循环添加事件 currentLiObj.onmouseover=function（）{ if（this.className.indexOf（"show"）<0）{ this.className+=" show"; } clearStyle（this）; } currentLiObj.onmouseout=function（）{ this.className=this.className.replace（"show",""）; clearStyle（this）; } } function clearStyle（obj）{ for（var i=0;i<length;i++）{ currentLiObj=liObj[i]; if（obj！=currentLiObj）{ currentLiObj.className=currentLiObj.className.replace（"show",""）; } } } } showAjaxContent（）; </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]