二、用无序列表（ul）中的列（li）放导航的内容。
三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。
四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
width:500px
margin:0 auto/*令盒子居中*/
font-size:20px /*定义字体的大小*/
}
ul{
margin:0padding:0/*把浏览器默认的间隔去掉*/
list-style:none /*把前面的序列号去掉*/
}
li{
float:left /*向左浮动，这个是实现水平的重要步骤！！*/
padding:0 15px /*li里面的字体和边框的距离*/
}
a{
text-decoration:none /*去掉超链接的下划线*/
color:#333 /*超链接的字体颜色*/
}
a:hover{
color:#696
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</div>
</body>
</html>
步骤/方法1
双击dreamweaver CS5图标
2
在菜单中单击“文件”选择“新建”
3
在新建文档窗口，选择“空白页”—“HTML”，文档类型选择“XHTML1.0 transitional”,单击“创建”按钮。
4
将插入点放在文档中，然后在菜单栏单击“格式”，在弹出的下拉菜单中选择“CSS样式”—“新建”
5
在“ 新建 CSS 规则” 对话框中，指定要创建的 CSS 规则的选择器类型：
若要创建一个可作为 class 属性应用于任何 HTML 元素的自定义样式，请从“ 选择器类型” 弹出菜单中选择“ 类” 选项，然后在“ 选择器名称” 文本框中输入样式的名称。
若要定义包含特定 ID 属性的标签的格式，请从“选择器类型”弹出菜单中选择“ID”选项，然后在“选择器名称”文本框中输入唯一 ID。
若要重新定义特定 HTML 标签的默认格式，请从“选择器类型”弹出菜单中选择“标签”选项，然后在“选择器名称”文本框中输入 HTML 标签或从弹出菜单中选择一个标签。
6
在“CSS规则定义”窗口中设置类型、背景、区块、方框、边框、列表、定位、护展中所需设置的参数，然后点击“确定”按钮完成设置。
7
还可以在CSS样式面板里设置。将插入点放在文档中，在CSS样式面板下面单击“新建CSS规则”图标。再完成步骤6的设置。
8
在CSS属性里设置类型、背景、区块、方框、边框、列表、定位、护展中所需设置的参数。
http://jingyan.baidu.com/article/93f9803fccd4dae0e46f5505.html
