淘寶首頁導(dǎo)航欄是很多人使用淘寶時(shí)經(jīng)常接觸到的一項(xiàng)功能，其中的css代碼也是很重要的一個(gè)部分。下面就來看一下淘寶首頁導(dǎo)航欄的css代碼：

/*設(shè)置導(dǎo)航欄的樣式*/
#J_NavCommonBox {
height: 32px;
line-height: 32px;
padding: 0px 10px 0px 60px;
position: relative;
z-index: 4;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
margin-top: 2px;
margin-bottom: 2px;
}
/*設(shè)置導(dǎo)航欄的滑動條*/
#J_NavCommonBox .nav-item-highlight {
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 32px;
background: #ef3c79;
}
/*設(shè)置導(dǎo)航欄的每個(gè)選項(xiàng)*/
#J_NavCommonBox .nav-item {
position: relative;
float: left;
margin-right: 10px;
padding-right: 12px;
font-size: 14px;
color: #666;
cursor: pointer;
}
/*設(shè)置導(dǎo)航欄當(dāng)前選中的選項(xiàng)*/
#J_NavCommonBox .nav-item.current {
color: #ef3c79;
}
/*設(shè)置導(dǎo)航欄選項(xiàng)的下拉菜單*/
#J_NavCommonBox .nav-item .menu-box {
position: absolute;
top: 32px;
left: 0px;
width: 100%;
z-index: 3;
display: none;
background: #fff;
border: 1px solid #f5f5f5;
}
/*設(shè)置導(dǎo)航欄下拉菜單的每個(gè)選項(xiàng)*/
#J_NavCommonBox .nav-item .menu-box a {
display: block;
padding: 5px 12px;
font-size: 14px;
color: #666;
text-decoration: none;
}
/*設(shè)置導(dǎo)航欄下拉菜單每個(gè)選項(xiàng)鼠標(biāo)懸停時(shí)的樣式*/
#J_NavCommonBox .nav-item .menu-box a:hover {
background: #f5f5f5;
}

如上所示，淘寶首頁導(dǎo)航欄的css代碼主要包括了導(dǎo)航欄的樣式、導(dǎo)航欄的滑動條、導(dǎo)航欄的選項(xiàng)、導(dǎo)航欄當(dāng)前選中的選項(xiàng)以及下拉菜單等部分。通過這些css代碼的設(shè)置，可以讓淘寶首頁導(dǎo)航欄看起來更加美觀、實(shí)用，更好地滿足用戶的需求。