在制作导航之前,和平常一样,首先需要一个良好的html结构
<ul>
<li><a href="www.68start.com">home</a></li>
<li><a href="www.68start.com">about</a></li>
<li><a href="www.68start.com">our services</a></li>
<li><a href="www.68start.com">our work</a></li>
<li><a href="www.68start.com">news</a></li>
</ul>

首先要做的是去掉默认的项目符号并将空白边和填充设置为零:
ul{
margin:0;
padding:0;
list-style-type:none;
}

对列表项并不应用样式,而是对其中包含的锚应用样式.为了创建与按钮相似的单击区域,需要将锚的display属性设置为block,然后指定锚的尺寸.在这个示例中,导航按钮是200像素宽,40像素高.还将行高设置为40像素,以便行文本垂直居中.最后两行两列只是修饰性的,它们设置链接的颜色并关闭下划线.
ul a{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
}

如果需要为链接加入背景翻转效果,只需要在a这个标签中定义其background属性,我想这一点就不必多说了吧可查阅a作为链接属性设置。