无序列表做导航

<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>
</div>

第三步
我们现在就给
#Nav{}

#Nav ul{list-sytle:none;}

#Nav ul li{float:left; width:100px; background:#ccc; margin-left:3px;line-height:30px;}

a{ text-decoration:none;}

#Nav a{display:block; text-algin:center; height:30px;}

#Nav a:link{color:#666;url:(arrow-off.gif) #ccc no-reapeat 5px 12px; text-decoration:none;}

#Nav a:visited{color:#666;text-decoration:underline;}

#Nav a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}

下面说一下制作这个导航菜单过程中重要的几步：
第一，ul无序列表默认的属性是带圆点的我们要先将圆点去掉，因为我们做菜单的时候用不到，list-sytle:none;这句就是将ul的默认样式去掉。
第二，就是假li默认向下排列改成是水平排列float:left;
第三，将a标签转化成块级元素，display:block;
最后就是给a标签的上个状态分别定义不同的样式。