1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容，可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。
3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏，overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏，float: left使导航栏水平显示。
6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
纵向的，可以用 ul li 来做，只要控制ul 和li 的宽度即可。
我贴个代码给你。
html 的
----------
<div class="new_box">
<ul> <li>2010/11/09 <a href="news/news.php?id=42">222</a></li>
<li>2010/11/08 <a href="news/news.php?id=41">444</a></li> <li>2010/10/14 <a href="news/news.php?id=40">44445</a></li>
</ul>
<div class="clear"></div>
</div>
-----------------------------
CSS
-------
.new_box{
width:235px
background:url(../img/news_bk.jpg) repeat-y
}
.new_box ul{
list-style:none
}
.new_box ul li{
padding-top:6px
list-style:none
width:205px
line-height:18px
padding-left:20px
float:left
background:url(../img/new_dot.jpg) 10px 14px no-repeat
｝
---------------
网站上一般都是利用css来做的。具体的做法：1、将导航栏里面的几个条目都做成无序列表里面的项
2、利用css将列表项的list-style,float等等属性设置，使列表项横排排列。
3、设置链接的属性就可以了。
一般都是这样做的，利用图片或者flash的话，网页会变大一点，对于网速慢的人来说，不方便访问。所以在能利用css的地方就尽量避免用图片或者falsh
