引接上期一篇的文章：淘宝店铺装修之导航CSS代码修改教程（上），下面还有通过更多的CSS代码实现淘宝店铺导航调整。
6.其他分类：一级导航设置
类名
按钮类名：.skin-box-bd.menu-list.menu{}
按钮链接类名：.skin-box-bd.menu-list.menu.link{}
文字类名：.skin-box-bd.menu-list.menu.link.title{}
图标类名（只有二级分类时有）：.skin-box-bd.menu-list.menu.link.popup-icon{}
激活后的链接类名（如果当前位置是首页，则首页按钮就是激活项）：.skin-box-bd.menu-list.menu-selected.link{}
激活后的文字类名：.skin-box-bd.menu-list.menu-selected.link.title{}
属性
float：设置浮动，用于块与块之间向左或向右排列
line-height：设置文字行间距
font-family：设置字体
font-size：设置文字大小
font-weight：设置粗体（bold为粗其他属性百度查看即可）
color：设置文字颜色
代码如下
.skin-box-bd.menu-list.menu{width:auto;height:30px;margin:0px;padding:0px;display:block;background:none;border:none;}
设置按钮宽度自适应，设置高度，内外边距清零，按块显示（因为是li标签），去掉背景和描边
.skin-box-bd.menu-list.menu.link{width:auto;height:30px;margin:020px;padding:0px;border:none;display:block;background:none;}
按钮链接设置宽高，外边距清零，由于按钮之间需要间隔，这个时候可以通过margin设置左右两边内边距各20像素，同样按块显示，清除描边及背景
.skin-box-bd.menu-list.menu.link.title{width:auto;height:30px;margin:0px;padding:0px;display:block;float:left;line-height:30px;font-family:"微软雅黑";font-size:12px;font-weight:bold;color:#fff;}
文字设置通过display：block将文字变为块显示，这样就可以用float属性进行左靠，因为有图标在，这个设置时必须的
.skin-box-bd.menu-list.menu.link.popup-icon{width:5px;height:30px;margin:0px;margin-left:5px;padding:0px;display:block;float:left;background:no-repeaturl(图片);}
图标设置与文字设置相同，用display：block变为块用float属性靠在文字后方，设置素材图片
效果如下
下面设置鼠标滑过时的变化
.skin-box-bd.menu-list.menu:hover{background:#111;}
鼠标滑过按钮时，按钮背景从隐藏变为有颜色
.skin-box-bd.menu-list.menu:hover.link.title{color:#ffd98d;}
鼠标滑过时，文字颜色改变
.skin-box-bd.menu-list.menu:hover.link.popup-icon{background-position:0px-30px;}
鼠标滑过时，图标素材图向上移动30像素，从而显示素材下半部分图片
效果如下
下面设置激活后的按钮
.skin-box-bd.menu-list.menu-selected.link.title{color:#ffd98d;}
激活后只改变了文字的颜色，这个部分只有发布之后才能生效，预览时无法查看
7.设置二级分类背景
类名
二级导航外边框类名：.popup-content{}
代码如下
.popup-content{border:none;width:190px;}
统一设置其他分类和所有分类的二级导航的宽度及描边
8.其他分类：二级导航
类名
外边框类名：.menu-popup-cats{}
单个项类名：.menu-popup-cats.sub-cat{}
文字类名：.menu-popup-cats.sub-cat.cat-name{}
代码如下
.menu-popup-cats{width:190px;height:auto;margin:0px;padding:0px;display:block;}
设置外边框的宽度为190像素，高度通过auto设置为自适应
.menu-popup-cats.sub-cat{width:190px;height:30px;margin:0px;padding:0px;display:block;background:#111;}
单个项的宽度同样设置为190像素，高度设置每个按钮为30像素，清零内外边距，设置背景色
.menu-popup-cats.sub-cat.cat-name{width:auto;height:30px;margin:0px0px0px10px;padding:0px;display:block;float:left;line-height:30px;font-family:"微软雅黑";font-size:12px;color:#fff;}
字体宽度设置为自适应，关键点事margin属性，即内边距，内边距离左侧相差10像素，这样就能与其他分类一级导航文字对齐了
效果如下
现在设置鼠标划过时的变化
.menu-popup-cats.sub-cat:hover{background:#444;}
设置鼠标滑过时，单个项的背景颜色
.menu-popup-cats.sub-cat:hover.cat-name{font-weight:bold;color:#ffd98d;}
设置鼠标滑过时，文字加粗变色
效果如下
9.所有分类：二级导航
类名
外边框类名：.all-cats-popup{}
弹出部分类名：.all-cats-popup.popup-inner{}
二级导航外边框类名：.all-cats-popup.popup-inner.cats-tree{}
单个项类名：.all-cats-popup.popup-inner.cats-tree.fst-cat{}
无子集的按钮链接：.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd{}
有子集的按钮链接：.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children{}
文字：.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd.fst-cat-name{}
图标：.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children.fst-cat-icon{}
代码如下
.all-cats-popup{width:190px;height:auto;margin:0px;padding:0px;background:#111;}
设置外边框宽高，去掉内外边距，添加背景色
.all-cats-popup.popup-inner{width:190px;height:auto;margin:0px;padding:0px;}
.all-cats-popup.popup-inner.cats-tree{width:190px;height:auto;margin:0px;padding:0px;display:block;}
弹出部分及二级导航外边框同样设置宽高，去掉内外边距
.all-cats-popup.popup-inner.cats-tree.fst-cat{width:190px;height:30px;margin:0px;padding:0px;display:block;background:none;border:none;}
单个项设置时在设置宽高及内外边距的同时，去掉背景，去掉描边
.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd{width:190px;height:30px;margin:0px;padding:0px;display:block;background:none;}
链接部分同上设置，必须按块显示（display：block）
.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd.fst-cat-name{width:170px;height:30px;margin:0px0px0px15px;padding:0px;display:block;float:left;line-height:30px;font-family:"微软雅黑";font-size:12px;color:#fff;}
文字设置时，设置按块显示，向左对齐（float：left），同时由于要给图标预留位置，因为宽度设置为170像素，文字与所有分类一级导航对齐，故此左边距设置15像素（margin：0px0px0px15px）
.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children.fst-cat-icon{width:5px;height:30px;margin:0px5px0px0px;padding:0px;display:block;float:right;background:no-repeaturl(图片);}
图标使用素材作为背景，设置不平铺，设置好宽高，这回是右对齐（float：right），因为要与所有分类一级导航的图标对齐，故右边距设置5像素（margin:0px5px0px0px）
效果如下
下面设置鼠标滑过时的样式
.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd:hover{background:#444;}
当鼠标划过时，背景颜色变化，可以设置在链接部分
.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd:hover.fst-cat-name{font-weight:bold;color:#ffd98d;}
文字部分在鼠标划过时会加粗变色
.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children:hover.fst-cat-icon{background-position:0px-30px;}
图标则是在鼠标划过时，背景图片向上移动30像素，神似图标变色
效果如下
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。
本文来源： 淘宝店铺装修：首页导航CSS代码修改教程（中）
