首先建立一个DIV，为其命名为“nav”，在DIV中建立一个<ul>无序列表，导航共有几个栏目，就为列表添加几个<li>的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。
然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：
ul {width:宽度值；height：高度值； list-style:none；}
如果是横向导航，还需为里面的列表项<li>标签设置左浮动的样式，代码为：li {float:left}
每个栏目之间分隔的距离可通过margin（外边距）属性来设置。
导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html
直接上个实例吧：
第一步，打开软件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>
单独的css是无法完成导航条的，需要结合html，一般导航条的制作都是通过一个div包裹着ul，使用li来排列完成导航条的html部分，css中，我们需要给这个div宽高，还需要设置好li的宽，高，还有一个float属性，这样基本上导航条就制作完成，请看代码：<html>
<head>
<style>
#div1{
width:600px
height:40px
font-size:13px
}
#div1 ul li{
list-style:none
width:50px //具体的高宽需要根据实际要求
height:30px
}
</head>
<body>
<div id='div1'>
<ul>
<li><a href=''>目录1</a></li>
<li><a href=''>目录2</a></li>
<li><a href=''>目录3</a></li>
<li><a href=''>目录4</a></li>
</ul>
</div>
</body>
</html>
