大家可以先去看一下效果
最近把店鋪重新裝修了一次。旺鋪2012的導航較之前有很大的改進。固定導航位置，保證買家可以在店鋪里隨意跳轉回到首頁，避免了以前“迷路”的現象。而且，導航還開放了css裝修功能，可以用css代碼，裝修出超炫的效果！
現在就把一些簡單實用的代碼寫在下方，絕對干貨！！！
學習教程的朋友必看：
1、有問題請在帖子上留言，我們有空會免費幫你解答；
2、要是你必須要和再旺旺上和我一對一討論裝修的問題，那請先收藏我們的水晶飾品店及里面的寶貝不少于10件，是否分享或購買根據您的實際需要而定；如果可以，您也可以跟我分享下您推廣寶貝的方式，因為我對這個是個白癡，就當是相互交換的條件吧！謝謝理解，店鋪地址在我的店鋪店招上面，謝謝；
3、白天時間太少，一般晚上九點過后的時間比較充裕；
謝謝大家支持，裝修問題我們將竭盡所能幫您處理！
下面開始教程！
沒做任何修改的導航是這樣的
一、首先我們進入到店鋪的裝修頁面，將鼠標放在導航上面會出現“編輯”字樣，單擊，如圖
選擇“顯示設置”選項卡
1.修改導航分類下面的背景色，代碼如下：
.skin-box-bd .link{background:#000000;}
效果如下
默認是黑色的，如果你要別的顏色，只要修改#000000就可以了，顏色對照表地址
http://www.114la.com/other/rgb.htm
如果你想要更加個性，而不想只要簡單的純色塊的話，可以自己做圖片，然后連接上去，代碼如下：
.skin-box-bd .link{background:url(圖片鏈接);}
效果如下
將“圖片連接”換成你的圖片的連接就可以了，一般都是自己做好然后上傳到淘寶圖片空間，然后鏈接就可以了！
在圖片空間點擊對應圖片下方的“鏈接”按鈕可以直接復制圖片鏈接，替換到代碼里就可以了！
2.修改整個導航的背景色【其實只修改了有分類之外的部分（前面我們已經修改好了分類背景），還有最右邊那部分沒改到，后面會有修改那里的代碼，一步步跟著來就沒錯了！】代碼如下：
.skin-box-bd .menu-list{background:#000000;}
效果如下
修改顏色的方法同上
修改成圖片的代碼如下：
.skin-box-bd .menu-list{background:url(圖片鏈接);}
3.修改最右邊留下的一小塊，2里提到的，代碼如下：
.skin-box-bd{background:#000000;}
效果如下
修改顏色的方法同上
修改成圖片的代碼如下：
.skin-box-bd{background:url(圖片鏈接);}
這樣做你的導航完成的差不多了，但是發布之后你會發現字體的背景色塊有問題，只有文字下方才有色塊，比如“首頁”，只有“首頁”兩個字下面有顏色，其它有些四個字的就四個字有，這樣很影響美觀！
所以我們還要加上兩條代碼
4.字外：
.skin-box-bd .menu-list .menu-selected .link{background:#000000;}
5.字里：
.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}
字外+字里=全部！
這樣就完整了
好了，以上就是我的淘寶店里的導航里用的所有代碼，下面再給大家一些別的代碼！！
二、下面紅色部分為可以修改的，顏色代碼大家很熟悉了，字號就是字體的大小，在網頁中，字體大小一般是14到20左右，根據自己的需要設定吧，直接填寫數字就OK了！
1.導航背景色代碼（除去“所有分類”）如下：
.menu-list .link{background:#000000;}
2.導航欄文字（除去“所有分類”）如下：
.menu-list .menu .title{color:#顏色代碼;font-size:字號px;}
3.“所有分類”的背景色代碼如下：
.all-cats .link{background:#000000;}
4.“所有分類”的文字代碼如下：
.all-cats .link .title{color:#顏色代碼;font-size:字號px;}
最新代碼，解決字體改大后導航右側消失的情況！
代碼如下：
.all-cats .link .title{font-size:字號px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;}
字號最大為21，繼續變大右側導航將消失！該代碼還不是很完善，我們會繼續研究！
5.二級分類文字代碼如下：
.popup-content .cats-tree .fst-cat .cat-name{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}
原來效果
修改后效果
6.二級分類背景代碼如下：
.popup-content{background:#000000;}
7.三級分類文字代碼（除去“所有寶貝”分類）如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}
原來效果
修改后效果
8.三級分類文字代碼（包括“所有寶貝”分類字體大小）這樣就無法改變字體顏色，我們會繼續完善該代碼！如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號px;color:#顏色;}
9.三級分類背景代碼：
.popup-content .cats-tree .snd-pop-inner{background:#000000;}
10.一級導航分類（除去“所有寶貝”分類）分隔線顏色代碼如下：
.menu-list .menu{border-color:#000000;}
11.一級導航“所有寶貝”分類分隔線顏色代碼如下：
.all-cats .link{border-color:#000000;}
12.一級導航分類的寬度修改代碼如下：
.menu-list .menu{background:#顏色;margin:0;padding:0px 增加的寬度px;}
13.鼠標滑過一級分類導航文字變換背景色代碼如下：
.menu-list .menu-hover .link{background:#000000;}
14.鼠標滑過一級分類導航文字變換顏色代碼如下：
.menu-list .menu-hover .link .title{color:#FFFFFF;}
15.鼠標滑過二級分類導航文字變換背景色代碼如下：
.popup-content .cats-tree .cat-hd-hover{background:#000000;}
16.鼠標滑過二級分類導航文字變換顏色代碼如下：
.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
17.鼠標滑過三級分類導航文字變換背景色代碼如下：
.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}
18.二級分類上加空間代碼如下：
.popup-content .cats-tree{margin:0 0 50px 0;}
19.修改“所有寶貝”右邊小圖標代碼如下：
.all-cats .link .popup-icon{background:url(圖片連接);}
20.修改二級分類右側圖標代碼如下（有三級分類才會顯示）：
.popup-content .cats-tree .fst-cat-icon{background:url(圖片連接);}
22.在三級分類前加上小塊白色代碼如下：
.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}
好了，我簡單的導航修改技巧就到這里了，以上效果都是用白色或黑色做給大家看，是為了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因為字體顏色和背景顏色一樣才變成全白的，修改了背景大家再修改字體顏色就可以了！希望大家都可以做出自己喜歡的導航！
三、關于店招和導航兩側的修改！
這里修改好，跟導航和店招結合在一起會更加完美！
修改方式如下：在店鋪裝修頁面的左上方有個“裝修”，將鼠標放在上面會出現下拉菜單，選擇“樣式菜單”
單擊左側的“背景設置”
這里有兩個選項卡，分別是“頁頭設置”和“頁面設置”。
所謂頁頭，其實就是導航以上（包括導航）的部分，而頁面就是導航以下的部分了！這里可以用純顏色設置，也可以用圖片設置，我們要結合導航，肯定就用圖片咯！
當然你想要更加個性的話，你也可以給每一個頁面都做一個不一樣的效果，只要單擊這里，下拉選擇相應頁面就可以了！
四、最后還有一個發布不顯示效果的解決方法！
導航修改好代碼之后，預覽有效果，但是發布之后還是顯示原來的效果，沒有任何變化！
解決的方法是在你修改好代碼之后，預覽有效果了，之后就關閉“店鋪裝修”頁面，之后重新打開再點“發布”就會顯示效果了！
如果你不知道哪個是“店鋪裝修”頁面，那就直接關閉瀏覽器，重新進“店鋪裝修”那個點“發布”就OK咯！
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源： 【旺鋪2012分享】導航CSS代碼使用修改技巧！
