DIV+CSS京东商城产品分类适合所有版本 第一步：在你所用的模板的css文件中加上以下代码 [Copy to clipboard]View Code CSS101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 .my_left_category{width211px;font-size12px;} .my_left_category h1{background-imageurl(imagesspring_06.jpg);height20px;background-repeatno-repeat;font-size14px;font-weightbold;padding-left15px;padding-top8px;margin0px;color#FFF;}.my_left_category .my_left_cat_list{width209px;border-color#ce2020;border-stylesolid;border-width0px 1px 1px 1px;line-height13.5pt;}.my_left_category .my_left_cat_list h2 {margin0px;padding3px 5px 0px 9px;}.my_left_category .my_left_cat_list h2 a{color#d6290b;font-weightbold;font-size14px;line-height22px;}.my_left_category .h2_cat{width209px;height26px;background-imageurl(imagesmy_menubg.gif);background-repeatno-repeat;line-height26px;font-weightnormal;color#333333;positionrelative;}.my_left_category a{font12px;text-decorationnone;color#333333;}.my_left_category ahover{text-decorationunderline;color#ff3333;}.my_left_category h3{margin0px;padding0px;height26px;font-size12px;font-weightnormal;displayblock;padding-left8px;}.my_left_category h3 span{color#999999; width145px; floatright;}.my_left_category h3 a{ line-height26px;}.my_left_category .h3_cat{displaynone;width204px;positionabsolute;left184px;margin-top-26px;cursorauto;}.my_left_category .shadow{positioninherit;backgroundurl(imagesshadow_04.gif) left top;width204px;}.my_left_category .shadow_border{positioninherit;width200px;border1px solid #959595; margin-top1px;border-left-width0px;backgroundurl(imagesshadow_border.gif) no-repeat 0px 21px;background-color#ffffff;margin-bottom3px}.my_left_category .shadow_border ul{margin0; padding0; margin-left15px}.my_left_category .shadow_border ul li {list-stylenone;padding-left10px;background-imageurl(imagesmy_cat_sub_menu_dot.gif);background-repeatno-repeat;background-position0px 8px;floatleft;width75px;height26px;overflowhidden;}.my_left_category .active_cat{ z-index99;background-position0 -25px;cursorpointer;}.my_left_category .active_cat h3 { font-weightbold}.my_left_category .active_cat h3 span{ displaynone;}.my_left_category .active_cat div{displayblock;} 第二步：模板文件夹的 librarycategory_tree.lbi内容改为： [Copy to clipboard]View Code HTML10111213141516171819202122232425262728293031323334353637383940414243444546 meta http-equiv=Content-Type content=texthtml; charset=gbkdiv class=my_left_categoryh1商品分类h1div class=my_left_cat_list{assign var=pre_item_level value=-1}!--{foreach from=cat_list(0,0,false,3,false) item=cat}--{if $cat.level lt 2 && $pre_item_level gt 0}divdiv {if}{if $cat.level eq 0}h2a href={$cat.url}{$cat.nameescapehtml}ah2 {elseif $cat.level eq 1}div class=h2_cat onmouseover=this.className=h2_cat active_cat onmouseout=this.className=h2_cath3span - {$cat.cat_descescapehtml}spana href={$cat.url}{$cat.nameescapehtml}ah3div class=h3_catdiv class=shadowdiv class=shadow_borderul{elseif $cat.level eq 2}lia href={$cat.url}{$cat.nameescapehtml}ali {if}{assign var=pre_item_level value=$cat.level}!--{foreach}--{if $pre_item_level gt 0}uldivdivdivdiv {if} meta 第三步：把用到的图片拷贝到模板文件夹的images目录完成！注：京东的二级分类名称旁边列了2个三级分类名称（灰色）,作为三级分类的提示。
参考其他网友的做法，这里使用二级类的描述字段cat_desc来实现,【用程序去调取二级类下的前两个三级分类完全是化简为烦的事情但这个效果要修改 includeslib_common.php 才生效的，当然，不修改也不会出错，只是没有显示罢了修改方法：在includeslib_common.php 的cat_list函数中找到$sql = “SELECT c.cat_id, c.cat_name,修改为$sql = “SELECT c.cat_id, c.cat_name, c.cat_desc,补充一下：在firefox等浏览器中，如果展开的部分被遮挡（由于父级容器overflowhidden引起），在.my_left_category的样式中加上 positionabsolute即可。
