左側導航菜單代碼_淘寶旺鋪裝修導航條左側下拉菜單如何設置css代碼

『壹』如何利用純CSS製作二級或多級導航菜單

本人親測下面這些代碼是可以實現二級或多級導航菜單的。

<style>

<!--

* {margin:0px;padding:0px;}

body {overflow:scroll;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;}

a {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;text-decoration:none;}

.menu {position:relative;width:1000px;background-color:#360;}

.menu ul {list-style-type:none;}

.menu li {float:left;position:relative;}

.menu ul ul {visibility:hidden;position:absolute;left:3px;top:22px;border:1px solid #000;}

.menu table {position:absolute; top:0; left:0;}

.menu ul li:hover ul,

.menu ul a:hover ul{visibility:visible;}

.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}

.menu a:hover{background:#690;color:#000;}

.menu ul ul,

.menu ul ul li {clear:both;text-align:left;}

.menu ul ul li a{display:block;width:100px;height:15px;}

.menu ul ul li a:hover{background:#690;}

-->

</style>

<body>

<ul>

<li><a href="#">一級菜單_01

</a>

<ul>

</ul>

</li>

</ul>

</div>

</body>

『貳』淘寶旺鋪裝修導航條左側下拉菜單如何設置css代碼

首先進入到店鋪的裝修頁面，將滑鼠放在導航上面會出現「編輯」字樣，單擊，選擇「顯示設置」選項卡

第一部分、靜態背景顏色
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;}

導航:首頁 > 編程語言 > 左側導航菜單代碼

左側導航菜單代碼

與左側導航菜單代碼相關的資料

友情鏈接