首页自定义导航CSS代码修改教程（下）

作为卖家，相信大家都非常清楚，每个详情页的转化率和店铺导航条设计都是息息相关的，因为每个详情页上面都会显示出店铺的导航条。

做个优秀的导航条是一定有必要。有些时候我们一定要去观察每一处细节，针对自己的店铺去认真思考怎样去设计。包括我们要时刻站在客户的心里去分析，虽然这个很难做到百分之百，但最起码能提高你们的转化率，店铺店招和导航我们要去分析，设计出一个符合我们店铺的一种效果，我们所有的工作都是为了拉销量挣钱，转化率是关键。而制作出更好的店铺导航需要通过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）

效果如下

代码比较多，属性设置相同的部分也很多（如宽高，内外间距等等），这是为了适应更多的浏览器，但仔细一看，需要改变的地方不多，无非是颜色，字体及素材图片而已，如果觉得还是复杂，则直接复制粘贴代码即可生效，当然，素材图片要上传到您自己的图片空间。