直接上个实例吧：
第一步，打开软件Adobe Dreamweave CS6，创建一个新的HTML。
第二步，在工作区域（body）用标签 ul 和 li 输入导航的内容。
第三，编辑样式CSS。在标签<head></head>之间写入样式表。，
第四，紧接上一步。由于无线序列具有默认样式，前面的圆点（），所以先写去除默认样式的样式。样式为：ul,li { list-style:nonelist-style-type:nonepadding:0margin:0} /*清除ul,li的默认样式*/
第五，由于默认的无序列表是竖排的，所以需要为其添加浮动，同时编辑宽度和距离等样式。添加样式为： ul li { float:leftwidth:80pxheight:30pxbackground:#900line-height:30pxtext-align:centermargin-right:2pxcolor:#fff} 效果，
第六，如果需要为导航添加链接（），同时获得鼠标滑过效果，即需要对 "a"为标签编写样式。样式为： ul li a { display:blockheight:30pxtext-decoration:nonecolor:#fff} ul li a:hover { background:#999}
最终预览效果。
完整代码：
<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<style> ul,li { list-style:none list-style-type:none padding:0 margin:0} /*清除ul,li的默认样式*/
ul li { float:leftwidth:100px height:30px background:#900 line-height:30px text-align:center margin-right:2px }
ul li a { display:block height:30px text-decoration:none color:#fff} ul li a:hover { background:#999}
</style></head>
<body> <ul>
<li><a href="#">导航一</a></li> <li><a href="#">导航二</a></li> <li><a href="#">导航三</a></li> <li><a href="#">导航四</a></li> <li><a href="#">导航五</a></li> </ul></body></html>
这个很简单，用js才能实现，css样式我就不说了，左侧是a链接，右侧是div，关键是js，在每个点击里添加onclick事件，事件触发opens函数，函数通过参数判断要打开哪个div，其余的再隐藏，给个例子你，很简单的东西，我随便写的，没有测试过，你自己研究研究：
<a href="#" onclick="opens(1)">1</a>
<a href="#" onclick="opens(2)">1</a>
<a href="#" onclick="opens(3)">1</a>
<div id="dis1">111</div>
<div id="dis2" style="display:none">222</div>
<div id="dis3" style="display:none">333</div>
<script>
function opens(obj){
for(var i = 1i<=3i++){
if(i == obj){document.getElementById("dis"+i).style.display="block"
}else
document.getElementById("dis"+i).style.display="none"
}
}
</script>
淘宝店铺导航栏CSS代码之分步详解第一部分、静态背景颜色 */ /*1、首页/店铺动态/其它导航类目的背景色，这里设为红色 */ .skin-box-bd .menu-list .link{background:red} /*
2、所有分类的背景色（最左边的），一样设为红色 */ .all-cats .link{background:red} /* 到这里，发觉右边的颜色还没有变呢，好的，接着下一步 */ /*
3、导航条整个分类段背景色，还是要设为红色，整体布局好看些 */ .skin-box-bd .menu-list{background:red} /* 注意观察，最右边还有一丝地方没有变 */ /*
4、导航条背景色（是最底层了吧），修补导航右侧缺口，再设为红色 */ .skin-box-bd{background:red} /* 小结：有点成功感了！换换其它颜色试试看吧 */ /* 背景色最好搭配页头背景图，才能整体大气美观 */ /* 第二部分、分隔线、静态文字的颜色 */ /*
5、首页等分类的右边的分隔线颜色，设为白色 */ .menu-list .menu{border-color:white} /*
6、所有分类的右边的分隔线颜色，设为白色 */ .all-cats .link{border-color:white} /*
7、首页/店铺动态/其它导航类目的文字颜色 */ .menu-list .menu .title{color:yellow} /*
8、所有分类的文字颜色（最左边那个）,*/ .all-cats .link .title{color:yellow} /*
小结：其实原来默认文字的颜色也挺好的 */ /* 第三部分、分类下的颜色 */
