淘宝新旺铺2012有一个非常棒的功能就是可以利用css代码控制导航条，实现鼠标移到或者选中某菜单项后，出现背景变化翻转的特效。本新版旺铺2012淘宝店铺装修教程将会教你如何添加新旺铺2012导航css代码，以及如何简单修改和编辑新旺铺2012导航css代码。

（一）导航条css是怎么样的

教程开始前，先放几个导航条css的效果吧：

(1)该导航条css下载见：http://www.yubaibai.com.cn/html/taobao2012/taobao2012_2941.html

(2)该导航条css下载见：http://www.yubaibai.com.cn/html/taobao2012/taobao2012_2940.html

(3)该导航条css下载见：http://www.yubaibai.com.cn/html/taobao2012/taobao2012_2939.html

（二）添加新旺铺导航条

如何安装旺铺2012 的导航条呢？进入店铺后台，选择导航处的”编辑“：

1.在打开的弹窗里面选择”添加“，来增加需要在导航条显示的菜单：

2.添加宝贝分类至导航操作如下：

3.添加页面至导航操作如下：

4.添加自定义链接至导航操作如下：

5.设置好的内容可以在此调整位置或删除：

淘宝导航条里可以添加宝贝分类、店铺动态、品牌故事和一些自定义分类菜单项。

6.在前台展示如下：

（三）新旺铺导航条css代码安装：

淘宝系统给新旺铺预置了5种样式，这种默认的导航条css特效不需单独设置，只需去装修--样式编辑--选择配色5种的某一个即可了。

如果你想要本教材开通提到的那种个性diy导航条效果，就需要自己编写并安装导航条css代码了。

这里先假设你已经编辑好，或者获得了一份淘宝新旺铺导航条css代码，详细说明一下如何添加安装css代码。

操作位置如下：

 单击导航条的“显示设置”，直接黏贴css代码即可。

（四）新旺铺导航条css代码范例讲解：

提示：/*导航条背景色，整体背景*/这种格式的css注解

下面是一个个性导航条css的代码：

其效果是：

 （1）导航条整体背景色为:#CE243F

 （2）菜单选中时的背景色为:#A50100

 （3）鼠标悬停时的背景色为:#A50100

 （4）文字的颜色为:#FFFFFF（白色）

下面是代码

/*导航条背景色，整体背景*/
.skin-box-bd{background:#CE243F;}
/*修改整个导航的背景色，菜单项右侧多余区域*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #CE243F;}    
/*菜单项右边线*/                               
.skin-box-bd .menu-list .menu{border:0px;}  
/*菜单项的背景色*/                                     
.skin-box-bd .menu-list .menu .link{background: none repeat scroll 0 0 #CE243F;}     
/*菜单项文字颜色*/                 
.skin-box-bd .menu-list .menu .title{color:#FFFFFF}                                                    
/*当前页(选中页)菜单项背景色*/
.skin-box-bd .menu-list .menu-selected .link{background:#A50100;} 
/*当前页(选中页)菜单项文字颜色*/                                    
.skin-box-bd .menu-list .menu-selected .link .title{color:#FFFFFF;background:#A50100;}                 
/*鼠标悬停在菜单项时的翻转背景色*/
.skin-box-bd .menu-list .menu-hover .link{background:#A50100;}                                         
/*鼠标悬停在菜单项时的文字颜色*/
.skin-box-bd .menu-list .menu-hover .link .title{color:#FFFFFF;background:#A50100;}                    

/*所有分类背景色*/
.skin-box-bd .all-cats .link{background: none repeat scroll 0 0 #CE243F;border:0px;}
/*所有分类文字颜色*/
.skin-box-bd .all-cats .title{color:#FFFFFF}  

该导航条css效果为：

鱼摆摆将会开辟专栏分享淘宝导航条css代码，欢迎大家关注本站。

下面这个地址是包含导航条css代码的整套模板，喜欢的朋友可以去看看。

http://www.yubaibai.com.cn/html/taobao2012/

如果你想了解更多样式，进一步学习提高css，可以去下面的这个地址学习。

http://www.w3cschool.cn/css_intro.html  

旺铺2012页头整体限高150PX。所以当店招设为150PX时，导航条会被挤下去，从而达到隐藏导航条的目的。

所以当你发现页头过高，导致导航被截断后，解决办法就是调整店招高度。