在淘寶購物時，我們常常使用的一項功能是導航條。淘寶的導航條非常醒目，可以讓用戶很快地找到自己想要的商品。下面，我們來看一下淘寶立體導航條的CSS代碼。

/*導航條容器，設(shè)置寬度、高度、背景色和陰影*/
.nav-container{
width:100%;
height:56px;
background-color:#FF4200;
box-shadow:0px 1px 2px #ccc;
position:fixed;
top:0;
z-index:99;
}
/*導航列表，設(shè)置寬度和高度*/
.nav-list{
width:1200px;
height:56px;
margin:0 auto;
list-style:none;
padding:0;
}
/*導航列表項，設(shè)置浮動、高度和內(nèi)邊距*/
.nav-item{
float:left;
height:56px;
padding:0 20px;
position:relative;
line-height:56px;
}
/*導航列表項懸停狀態(tài)，設(shè)置背景顏色和文字顏色*/
.nav-item:hover{
background-color:#EB6100;
color:#fff;
}
/*導航列表項選中狀態(tài)，設(shè)置背景顏色和文字顏色*/
.nav-item.active{
background-color:#EB6100;
color:#fff;
}
/*導航列表項下的三角形圖標，設(shè)置絕對定位、寬高和邊框*/
.icon{
position:absolute;
bottom:-16px;
left:50%;
margin-left:-10px;
width:0;
height:0;
border-width:8px;
border-style:solid;
border-color:transparent transparent #fff transparent;
}

以上就是淘寶立體導航條的CSS代碼，它使用了浮動、絕對定位、背景顏色等屬性，使得導航條在顯示時有三維立體感。這也是淘寶UI設(shè)計常用的一種效果，為用戶帶來更好的體驗。