下面做导航条右边部分。 
图1
分析：
1.用无序列表ul制作菜单导航条。
2.有些菜单后面有小三角标志
3.菜单之间有小竖线隔开。注意这里的小竖线高度不够，不能认为菜单的边框，它是一个微型盒子。
1.导航菜单栏基本结构
HTML代码：
<div class="fr">
<!--右盒子-->
<ul>
<li>
<a href="#">你好，请登录</a>
<!--中间有小间距，这里用两个空格隔开-->
<a href="#" class="col-red">免费注册</a>
<!--免费注册的字体为红色，所以单独给它加个类名。col-red类有important！属性，权重最高-->
</li>
<li class="line"></li>
<!--灰色竖线，添加类“line”-->
<li>我的订单</li>
<li class="line"></li>
<li>我的京东</li>
<li class="line"></li>
<li>京东会员</li>
<li class="line"></li>
<li>企业采购</li>
<li class="line"></li>
<li>手机京东</li>
<li class="line"></li>
<li>关注京东</li>
<li class="line"></li>
<li>客户服务</li>
<li class="line"></li>
<li>网站导航</li>
</ul>
</div>CSS代码：
.fr li{
float: left;
/* 浮动不继承，这里需要让所有的li盒子左浮动，才能按顺序排在一行*/
padding:0 10px;
/*用padding挤开文字*/
}
.fr .line{
/*设置line的属性*/
width: 1px;
height: 12px;
_font-size: 0;
/*ie6不支持小于12px的盒子，解决办法：加上_font-size: 0;详情点击：http://blog.csdn.net/sinat_34647836/article/details/55004778*/
background-color: #ddd;
padding: 0;
/*padding会继承，如果这里不设置为0，这个微型盒子也会有10px的左右padding*/
margin-top:9px;
/*测量：使小竖线下移9px*/
}至此，一个简单的导航菜单栏已做好，效果：
图2
2.添加小三角
接着，就是给菜单添加后面的小三角，在上篇博客已经做过小三角样式了，现在只需把样式添加到菜单里面：
html：
给每个需要小三角的菜单添加类名和菱形盒子
<li class="xsj">我的京东
<i><s>◇</s></i>
</li>CSS：
.header .dt,.header .xsj{
padding: 0 20px 0 10px;
/*改变后面有三角的li标签的padding*/
position: relative;
}
.header .dt i,.xsj i {
font: 400 15px "宋体";
position: absolute;
width: 15px;
height: 7px;
top: 13px;
right: 3px;
overflow: hidden;
}
.dt s,.xsj s{
position: absolute;
top: -8px;
left: 0;
}做完这一步，看看效果：
图3
3.添加小手机图片
附上小图片的精灵图： 
HTML代码：
<li class="xsj jd-sj">
<em class="sj"></em>
手机京东
<i><s>◇</s></i>
</li>css代码：
.fr .jd-sj{
padding: 0 20px 0 25px;
/*因为要在前面添加手机图标，所以需要增加li盒子的左padding，层叠掉上面设置的padding，注意权重。*/
}
.jd-sj .sj{
position: absolute;
/*绝对定位，li盒子已经写过position:relative;*/
width: 15px;
height: 20px;
/*给盒子设置宽高，使其正好和图片大小相同*/
background: url(../images/sprite.png) no-repeat;
/*所用图片在精灵图第一个*/
left: 5px;
top: 5px;
/*相对于li盒子的定位*/
}效果： 
好啦，导航条已经做完了，希望能对大家有所帮助，谢谢！