导航栏_2

运行效果：

*首页是固定下面有一个蓝色的横线，其他超链接是鼠标以上去显示下方的横线。

前台代码：

<div class ="nav">
                <ul>
                    <li><a href ="#"><span class ="fixed">首&nbsp;&nbsp;页</span></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>
        </div><!--nav end.-->

使用的CSS样式：

/*总体设置*/
* {
    margin:0;
    padding:0;
}

/*总体上对 a标签 进行设置*/
a:link, a:visited {
    text-decoration:none;
    color:#202020;
}
a:hover, a:active {
    text-decoration:none;
    color:#B81D18;
}

/*导航栏*/
.nav {
    width:985px;
    height:70px;
    margin:0 auto;
    margin-top:20px;
}

/*导航栏下的 li 标签*/
.nav li {
    line-height:70px;
    list-style-type:none;
    float:left;    
}

/*导航栏下的 li 标签下的 a 标签*/
.nav li a {
    font-size:20px;
    margin-right:60px;
    padding-bottom:5px;
}

/*导航栏下的 li 标签下的 a 标签，未点击按钮和已经点击过超链接样式*/
.nav li a:link, .nav li a:visited {
    color:#202020;
    text-decoration:none;
}

/*导航栏下的 li 标签下的 a 标签，已经点击按钮和正在点击过超链接样式*/
.nav li a:hover, .nav li a:active {
    color:#004687;
    text-decoration:none;
    border-bottom:3px solid #004687;
}

/*固定第一个”首页“超链接的样式*/
.fixed {
    padding-bottom:5px;
    color:#202020;
    border-bottom:3px solid #004687;
}