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、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
怎么将导航栏始终固定在窗口顶部在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部，就算是下拉滚动条也不会被窗口所遮挡，这样的功能往往非常的使用，下面就简单介绍一下如何实现此种功能。先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
padding:0px
margin:0px
}
body, ul, li{
background-color:white
font-size:12px
font-family:Arial, Helvetica, sans-serif
text-align:center
}
#main{
width:20px
height:1000px
margin:0px auto
background-color:#CCC
}
#nav{
width:500px
margin:0px auto
position:fixed/*固定作用*/
top:0px
left:490px
/*ie6下样式，加下划线表示只针对ie6 的hack */
_position:absolute/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px")/* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
z-index:9999/* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
text-align:left
}
a{
color:#000000
text-decoration:none
}
.menu{
width:120px
height:18px
margin:0px 4px 0px 0px
background-color:#F5F5F5
color:#999999
border:1px solid #EEE8DD
padding:6px 0px 0px 0px
overflow-y:hidden
cursor:hand
display:inline
list-style:none
font-weight:bold
float:left
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu"><a href="#">前台专区</a></li>
<li class="menu"><a href="#">后台专区</a></li>
<li class="menu"><a href="#">交流专区</a></li>
</ul>
</div>
<div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div>
</body>
</html>
上面的代码已经实现了需要的功能，导航条固定在了网页的顶部，这个主要是使用了position:fixed，然后将top值设置为0即可，但是仅仅使用position:fixed还是不够，因为IE6浏览器并不支持，所以还需要进行浏览器兼容性设置，那就是添加以下代码即可:
_position:absolute/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px")/* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
置顶的优点1.减少跳出率：如果是从搜寻引擎而来的访客，对我们网站不熟，文章读完、资料找到后，没有个吸引注意力的设计，通常就直接离开了。那么如果浮动导览列恰巧有个访客有兴趣的主题，就有机会留住这位客人了。
2.随时提供导航：不是每个上网的人都很熟悉网站的构造、摆设位置等，那么这个浮动导览列只要项目设计得好，就能让这位迷途羔羊的网路生手有一个很好的重点指引。
3.节省操作：导览列置顶可以省去按「回到顶端」这个按钮，网页可以少安装、执行一个区块，而且「回到顶端」按钮有时会遮住一些文字。
实现方法导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种，这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现
注意：dispaly:fixed；会使元素脱离文档，不占据文档空间。所以页面会有一些跳动，这时可以给相邻元素加上nav所占高度的margin-top或padding-top即可
（1）“导航栏下拉至一定高度后固定在顶部的特效”，也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码：
将这个js放到要实现效果的页面里面去，然后我们要修改的是第三行的.nav，“nav“改成你自己页面导航栏的class；第七行的”100“为下拉到100个像素的时候触发特效，可以自行修改至合适的高度。
（2）然后在css文件里面增加这个属性：
这样就差不多完成了。
讲下这个js的意思，判断下拉到一定高度的时候，给导航栏的div插入一个”fixednav“属性，然后给”fixednav“加上固定在顶部的参数。
