今天我們來(lái)學(xué)習(xí)一下淘寶導(dǎo)航的CSS代碼教程。以下是代碼，段落用p標(biāo)簽表示，代碼用pre標(biāo)簽表示：

1.設(shè)置導(dǎo)航欄樣式

/*設(shè)置導(dǎo)航欄樣式*/
.nav-bar {
width: 100%;
height: 50px;
background-color: #f5f5f5;
border-bottom: 1px solid #e0e0e0;
}

2.設(shè)置導(dǎo)航欄鏈接樣式

/*設(shè)置導(dǎo)航欄鏈接樣式*/
.nav-link {
font-size: 14px;
line-height: 50px;
color: #333;
padding: 0 20px;
display: inline-block;
}
.nav-link:hover {
color: #ff4400;
}

3.設(shè)置導(dǎo)航欄選中樣式

/*設(shè)置導(dǎo)航欄選中樣式*/
.nav-link.active {
color: #ff4400;
font-weight: bold;
border-bottom: 2px solid #ff4400;
}

4.設(shè)置下拉菜單樣式

/*設(shè)置下拉菜單樣式*/
.dropdown {
position: relative;
display: inline-block;
margin-left: 20px;
}
.dropdown-menu {
position: absolute;
top: 50px;
left: 0;
width: 120px;
background-color: #fff;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 5px rgba(0,0,0,.1);
display: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-item {
font-size: 12px;
color: #666;
padding: 8px 12px;
cursor: pointer;
}
.dropdown-item:hover {
color: #ff4400;
}

以上就是淘寶導(dǎo)航的CSS代碼教程。希望大家可以從中學(xué)到一些有用的知識(shí)。