导航条菜单

1.垂直菜单的制作

效果：

HTML代码：

<!--导航菜单基本都是用无序列表-->
<ul class="nav">
    <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>

CSS样式：

<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
ul{
    list-style:none; /*去掉每项前的小图标*/
    width:100px} /*设置宽度*/
.nav li a{ 
    display:block; /*设置为块级元素*/
    height:30px; /*设置高度*/
    text-indent:20px; /*首行缩进*/
    background-color:#efefef; 
    margin-bottom:1px;}
/*设置链接样式*/
a{
    color:#333;
    text-decoration:none}
.nav li a:hover{
    background-color:#F60; 
    color:#fff}
</style>

2.水平菜单制作

效果：

HTML代码：

<ul class="nav">
    <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>

CSS代码：

<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
ul{ 
    list-style:none;}/*去掉每项前的小图标*/
.nav li{
    float:left;} /*设置左浮动*/
.nav li a{ 
    display:block; /*设置为块级元素*/
    height:30px; /*设置高度*/
    width:100px; /*设置宽度*/
    text-align:center;/*字体水平居中*/
    margin-bottom:1px;}
/*设置链接样式*/
a{
    color:#333;
    text-decoration:none}
.nav li a:hover{ background-color:#F60; color:#fff}
</style>

3.圆角菜单制作

所需图片：

效果：

HTML代码：

<ul class="nav">
    <li><a class="on" href="#">首　　页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

CSS代码：

<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
.nav{
    list-style:none; 
    border-bottom:10px solid #F60; /*橘色横线*/
    margin-top:20px; 
    padding-left:50px;}
.nav li{float:left}/*设置为左浮动*/
.nav li a{
    display:block; /*设置为块级元素*/
    width:120px; /*设置宽度*/
    height:30px;/*设置高度*/
    text-align:center; /*文字水平居中*/
    line-height:30px; /*文字垂直居中，其值须为高度值*/            background:url(http://img.mukewang.com/53846438000168f901200060.jpg); /*导入背景图片*/
    margin-left:2px;}/*显示图片的灰色部分*/
/*链接样式*/
a{
    color:#333;
    text-decoration:none}
.nav li a.on, .nav li a:hover{
    background-position:0px -30px; /*显示图片的橘色部分*/
    color:#fff;}
</style>

</head>

注：绝大多数小图标和细节效果使用这个方法实现。