Question

淘宝旺铺装修导航条左侧下拉菜单如何设置css代码

淘宝旺铺新版导航条导航条左侧下拉菜单如何设置？背景颜色和文本变粗。css如何如何设置。

如图

Answer 1

楼主您好，我调试过，你也试试。你懂CSS，我还是按照步骤一步一步来。以便不懂CSS也可以学习下。

第一步，进入店铺装修点编辑：

第二步，点显示设置：

第三步，将显示代码放进去，这个是我们团队的代码：

第四，依您的背景颜色和文本变粗，代码如下：

.all-cats .link{background:none repeat scroll 0 0 #FF0000;}.skin-box-bd .all-cats .title{font-size:12px;font-weight:bold;color:#000000;}

特别说明一下：.all-cats .link{background:none repeat scroll 0 0 #FF0000;}.这段代码是控制“所有分类”的背景，我设置的是红色，颜色代码为#FF0000；

skin-box-bd .all-cats .title{font-size:12px;font-weight:bold;color:#000000;}这段代码是控制字体顺序依次是“所有分类”文字的大小，是否加粗，文字的颜色。

您试试。

第五，拓展一下所有分类类目下的子类目如何实现控制。

您可以在这里再进一步深入研究一下。

 

最后，给个建议，就是利用谷歌浏览器，鼠标点右键，有一项是“审查元素”，可以查看代码，慢慢调试。

追问

哥们，还是你实在。我顺便问下。导航条二级菜单如何设置啊。这种。代码，可告知吗？

追答

 导航颜色设置;所有分类颜色设置;一级下拉颜色设置;二级下拉颜色设置;

前天我也提了一个建议，设计团队程序师小黑即可在我们的主页弄了CSS生成工具。

分享一下这些代码，楼主你自己研究一下。由于超过字符，以上传附件。请下载查收。

Answer 2

首先进入到店铺的装修页面，将鼠标放在导航上面会出现“编辑”字样，单击，选择“显示设置”选项卡

第一部分、静态背景颜色
1、首页/店铺动态/其它导航类目的背景色，这里设为红色
.skin-box-bd .menu-list .link{background:red;}
2、所有分类的背景色（最左边的），一样设为红色
.all-cats .link{background:red;}
到这里，发觉右边的颜色还没有变呢，好的，接着下一步
3、导航条整个分类段背景色，还是要设为红色，整体布局好看些
.skin-box-bd .menu-list{background:red;}
注意观察，最右边还有一丝地方没有变
4、导航条背景色（是最底层了吧），修补导航右侧缺口，再设为红色
.skin-box-bd{background:red;}
小结：有点成功感了！换换其它颜色试试看吧
背景色最好搭配页头背景图，才能整体大气美观

第二部分、分隔线、静态文字的颜色
5、首页等分类的右边的分隔线颜色，设为白色
.menu-list .menu{border-color:white;}
6、所有分类的右边的分隔线颜色，设为白色
.all-cats .link{border-color:white;}
7、首页/店铺动态/其它导航类目的文字颜色
.menu-list .menu .title{color:yellow;}
8、所有分类的文字颜色（最左边那个）,
.all-cats .link .title{color:yellow;}
小结：其实原来默认文字的颜色也挺好的

第三部分、分类下的颜色
9、二级分类的背景色，设为灰色
.popup-content{background:gray;}
10、三级分类的背景色，我设为深灰色
.popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
11、二级分类的文字颜色，设为黄色
.popup-content .cat-name{color:yellow;}
12、三级分类的文字颜色。（如果后面要鼠标滑过变色<21.22>，这句要写）
.popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}
小结：上面这句不写，和二级分类颜色是一样的

第四部分、鼠标滑过变背景色
13、鼠标滑过首页/店铺动态/其它导航类目变换背景色，这设为蓝色
.menu-list .menu-hover .link{background:blue;}
14、鼠标滑过所有分类（最左边那个）变换背景色，这同样设为蓝色
.all-cats-hover .link{background:blue;}
15、鼠标滑过所有分类下的二级分类变换背景色，这设为蓝色
.popup-content .cats-tree .cat-hd-hover{background:blue;}
16、鼠标滑过所有分类下的三级分类变换背景色，这设为深蓝色
.popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}
17、鼠标滑过导航类目下的宝贝分类变换背景色，这设为蓝色
.menu-popup-cats .sub-cat-hover{background:blue;}
小结：这个所有分类，与首页后面的，是要分开设计的

第五部分、鼠标滑过变文字颜色
18、鼠标滑过首页/店铺动态/其它导航类目变换文字颜色，这设为红色
.menu-list .menu-hover .title{color:red;}
19、鼠标滑过所有分类（最左边那个）变换文字颜色，这同样设为红色
.all-cats-hover .link .title{color:red;}
20、鼠标滑过导航类目下的宝贝分类变换文字颜色，这设为红色
.menu-popup-cats .sub-cat-hover .cat-name{color:red;}
21、鼠标滑过所有分类下的二级分类变换文字颜色，这设为红色
.popup-content .cat-hd-hover .cat-name{color:red;}
22、鼠标滑过所有分类下的三级分类变换文字颜色，这设为红色
.popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}
小结：这部分还是默认白色的好看

第六部分、导航项目激活状态
23、激活项目的文字背景色（难看，所以none）、文字颜色（选白色）
.skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
24、激活项目的项目背景色（项目框），选紫色
.skin-box-bd .menu-list .menu-selected .link{background:purple;}

Answer 3

 

把您要的颜色说下，我可以给您代码

Answer 4

需要代码，我有，但是我是买的

追问

哦，那就算了。css我懂，但是不知道具体对应的那个 class类。