作为卖家，相信大家都非常清楚，每个详情页的转化率和店铺导航条设计都是息息相关的，因为每个详情页上面都会显示出店铺的导航条。
做个优秀的导航条是一定有必要。有些时候我们一定要去观察每一处细节，针对自己的店铺去认真思考怎样去设计。包括我们要时刻站在客户的心里去分析，虽然这个很难做到百分之百，但最起码能提高你们的转化率，店铺店招和导航我们要去分析，设计出一个符合我们店铺的一种效果，我们所有的工作都是为了拉销量挣钱，转化率是关键。而制作出更好的店铺导航需要通过CSS代码来实现。
引接上期一篇的文章：淘宝店铺装修之导航CSS代码修改教程（中），下面还有通过更多的CSS代码实现淘宝店铺三级导航。
10、所有分类：三级导航
1.类名
弹出部分外边框类名：.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop{}
弹出部分内容类名：.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner{}
导航外边框类名：.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd{}
导航单项类名：.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat{}
链接：.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd{}
文字：.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd .snd-cat-name{}
图标：all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd .cat-icon{}
2.属性
透明度：opacity（这个属性在低版本浏览器中是无效的）
3.代码如下
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop{width:190px; height:auto; margin:0px; padding:0px;}
弹出部分外边框设置好宽高及清零内外边距
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner{width:190px; height:auto; margin:0px; padding:0px; border:none; opacity:0.9;}
弹出内容设置宽高及清零内外边距，去掉描边，设置透明度（可设0.0 至 1.0）
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd{width:190px; height:auto; margin:0px; padding:0px; display:block; }
三级导航列表同样设置宽高及清零内外边距，按块显示
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat{width:190px; height:auto; margin:0px; padding:0px; display:block; }
单个项设置宽高，清零内外边距，按块显示，这里值得注意的是，由于所有分类的三级导航和其他分类的三级导航不同，因此高度要设置auto（自适应）
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd{width:190px; height:30px; margin:0px; padding:0px; display:block; background:#444;}
弹出链接部分可以将高度设置为30，这样所有分类的三级导航和其他分类的三级导航样式同步，这里设置背景色，用于鼠标划过时的变色。
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd .snd-cat-name{width:150px; height:30px; margin:0px 0px 0px 20px; padding:0px; display:block; float:left; line-height:30px; font-family:"微软雅黑"; font-size:12px; color:#fff;}
文字设置时，由于美观，左侧要留出空间，故设左侧间距设20，宽度适当设置150像素
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd .cat-icon{width:3px; height:30px; margin:0px; margin-left:10px; padding:0px; display:none; float:left; background:no-repeat url(图片);}
图标设置好宽高，背景使用素材，注意的地方是图标一开始是隐藏的（display：none），在鼠标划过时显示，左侧间距设10，用于对齐
效果如下
现在开始设置鼠标划过时的样式
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd:hover{background:#666;}
鼠标滑过时替换背景色
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd:hover .snd-cat-name{font-weight:bold; color:#ffd98d;}
鼠标划过时文字加粗替换颜色
.all-cats-popup .popup-inner .cats-tree .fst-cat .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd:hover .cat-icon{display:block;}
图标部分，只需将原来隐藏的设置显示即可（display：block）
效果如下
代码比较多，属性设置相同的部分也很多（如宽高，内外间距等等），这是为了适应更多的浏览器，但仔细一看，需要改变的地方不多，无非是颜色，字体及素材图片而已，如果觉得还是复杂，则直接复制粘贴代码即可生效，当然，素材图片要上传到您自己的图片空间。
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。
本文来源： 首页自定义导航CSS代码修改教程（下）
