这个就不必多说具体的代码如下：
<html>
<head>
<title>横向导航栏</title>
<style>
<!---->
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li><a href="#">导航6</a></li>
</ul>
</div>
</body>
</html>
测试结果应为下图（1）
下面我们通过CSS 来改变他的样式。
首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！
现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。
方法是在<style></style>之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。
<style>
<!--
.nav ul{
width:980px/*设置元素宽度为980px*/
border:1px solid #000/*设置一个颜色为#000，宽度为1px的边框*/
}
-->
</style>
测试结果如图2
接下来我们让他居中。我们在样式中加入以下代码。
.nav ul{
width:980px/*设置元素宽度为980px*/
border:1px solid #000/*设置一个颜色为#000，宽度为1px的边框*/
margin:0px auto 0px auto/*也可以简写为margin:0 auto*/
}
测试结果应为图3。
因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。
.nav ul li{
float:left/*让li元素左浮动*/
}
我们看到测试结果如图4。
边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。（具体的原因想知道可以百度）当然稍后我们可以给ul或.nav加上高度。
接下来，我们通过给元素<a>添加样式，让他更美观。加入以下代码。
.nav ul li a{
width:80px/*设置元素宽为80px*/
height:28px/*设置高度为28px*/
line-height:28px/*设置行距为28px，让文字在每行的中间位置*/
background:red/*设置元素的背景为红色*/
color:#FFF/*文字颜色是白色*/
margin:5px 10px
font-size:12px/*用12号字*/
display:block/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/
text-align:center/*让文本居中*/
text-decoration:none/*去掉下划线*/
}
效果如图5
我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。
.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/
width:78px
height:26px
line-height:28px
border:1px solid red
color:red
background:#FFF
}
测试结果如图6
最后稍微整理一下代码
.nav ul{
width:980px
margin:0px auto
height:38px
padding:0
}
.nav ul li{
float:left
}
.nav ul li a{
width:80px
height:28px
line-height:28px
background:red
color:#FFF
margin:5px 10px
font-size:12px
display:block
text-align:center
text-decoration:none
}
.nav ul li a:hover{
width:78px
height:26px
line-height:28px
border:1px solid red
color:red
background:#FFF
}
看看效果，成功没？
思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。
用CSS控制的下拉菜单，在各个浏览器中表现的不够完美，最佳的方法是使用jQuery来制作，代码如下，加了一个缓动的效果：[HTML部分]
<div
id="nav">
<ul>
<li><a
href="#">菜单零</a></li>
<li><a
href="#">菜单一</a></li>
<ul
class="childnav">
<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>
<li><a
href="#">子菜单</a></li>
</ul>
<li><a
href="#">菜单二</a>
<ul
class="childnav">
<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>
<li><a
href="#">子菜单</a></li>
</ul>
</li>
<li><a
href="#">菜单四</a></li>
<!--
/nav
-->
</ul>
</div>
[JS部分]
<script
type="text/javascript">
$(document).ready(function(){
$("#nav
ul
li
a").hover(function()
{
$(this).parent().find("ul.childnav").slideDown('fast').show()
$(this).parent().hover(function()
{
},
function(){
$(this).parent().find("ul.childnav").slideUp('slow')
})
})
})
</script>
[CSS部分]
<style
type="text/css">
*
{
padding:0
margin:0
list-style:none
}
#nav
{
margin:200px
}
#nav
ul
{
background:#333
padding:5px
float:left
width:100%
}
#nav
li
{
float:left
padding:0
5px
position:relative
}
#nav
li
a
{
float:left
padding:0
5px
display:block
text-align:center
color:#fff
text-decoration:none
font-size:12px
height:18px
line-height:18px
}
#nav
li
a:hover,
#nav
li
a.on
{
background:#444
text-decoration:none
}
#nav
li
ul
{
display:
none
position:
absolute
left:
-2px
top:
18px
background:
#999
border-bottom:3px
solid
#333
z-index:1000
}
#nav
li
ul
li
{
background:none
float:none
padding:0
}
#nav
li
ul
a
{
float:none
}
#nav
li
ul
a:hover
{
background:#888
}
#nav
li:hover
ul,
#nav
li.over
ul
{
display:
block
z-index:999
}
</style>
