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、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
您好！您应该提问了2次吧，再给您回答一次：
<style>body,li,ul{margin:0padding:0} /* 浏览器重置 */
li{list-style:none} /* 浏览器重置 去掉li前面的点 */
.nav{background:#36Czoom:1width:500pxmargin:50px auto} /* 设置整个导航条的样式，以及IE的清浮动 */
.nav:after{clear:bothdisplay:blockcontent:""} /* 标准浏览器的清浮动，因为里面的li浮动了 */
.nav li {float:leftpadding:0 10pxcolor:#F00height:24pxline-height:24px} /* 每个导航项的样式，关键是设置浮动让每个li在同一行（float:left） */
</style>
<ul class="nav">
<li>导航项1</li>
<li>导航项2</li>
<li>导航项3</li>
<li>导航项4</li>
</ul>
希望我的回答能够帮到您！如果有什么不懂的可以追问我。如果有帮助请采纳，回答不易！
怎么将导航栏始终固定在窗口顶部在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部，就算是下拉滚动条也不会被窗口所遮挡，这样的功能往往非常的使用，下面就简单介绍一下如何实现此种功能。先看一段代码实例:
<!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")/* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
