在当今数字时代，购物已经离不开电商平台。而作为电商平台中的翘楚，淘宝网的导航栏靠近顶部的位置，是淘宝用户必不可少的购物工具之一。下面就为大家揭秘淘宝导航栏的CSS代码，让你可以清晰的了解此导航的样式制作。

淘宝导航栏的CSS代码主要包括以下几个样式：

1.导航栏整体样式

.nav-bd {

height: 40px;

line-height: 40px;

overflow: hidden;

background-position: 0 0;

}

可以看到，导航栏整体是一个高度为40px，行高也为40px的块级元素。同时，为了防止导航栏中的多余内容溢出到其他区域，CSS代码使用了overflow:hidden属性，把导航栏固定在一个区域中。

2.各个链接样式

.nav-bd .nav-item {

display: inline-block;

zoom: 1;

padding: 0 15px;

position: relative;

font-size: 14px;

}

.nav-bd .nav-item-active, .nav-bd .nav-item:hover {

background-position: 0 -40px;

color: #FF0036;

}

.nav-bd .nav-item-active .arrow, .nav-bd .nav-item:hover .arrow {

visibility: visible;

}

在导航栏的块级元素中，每一个链接都是行内块级元素。同时，每一个导航栏链接内部含有一个子元素íarrow，这个箭头样式，在鼠标hover到链接上的时候显示出来，给用户一个明确的指示。

3.用户信息样式

.tbm-user {

position: relative;

margin: 0 10px;

padding-left: 27px;

font-size: 12px;

}

.tbm-user .username {

color: #FF0036;

cursor: pointer;

}

.tbm-user .split {

margin: 0 5px;

}

.tbm-user .msg {

color: #FF0036;

cursor: pointer;

}

.tbm-user .msg .num {

padding: 1px 3px;

margin-left: 3px;

line-height: 10px;

vertical-align: middle;

color: #FFFFFF;

background: #FF0036;

border-radius: 2px;

}

在淘宝导航栏中的用户信息区域，主要包含以下几个元素：

1）用户名

2）消息提醒

3）分割线

其中，用户名的样式为醒目的#FF0036，而消息提醒样式中的数字，用padding和margin两个属性进行微调，并且用了圆角边框，会在用户打开消息提醒时显示出来。

以上是淘宝导航栏CSS代码的主要内容。在实际编写时，我们可以根据自己的需要进行更改和调整。通过学习导航栏CSS样式设计，可以帮助你更好地掌握CSS技巧，为你日后的开发工作提供有力的帮助。