导航栏结构分析
有的网页导航栏直接将a标签放在div中，比如：百度和网易等。
<div id="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
有的网页导航栏将a标签放在li中，比如搜狐和B站等
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
导航经常会有好几级的情况，li可以很好的展现项目级别关系，直接用a无法突出元素之间的关联，同时使用ul+li方式可以增加对搜索引擎的友好度。但在单级导航栏直接用a标签也不是不可以。下面几个简单例子直接使用a标签的方式，利用纯CSS，不引入JavaScript和jQuery。
引入CSS精灵的导航栏
首先用上之前的CSS Sprite。这里引用下别人的图
简单的HTML框架：
<div id="nav">
<a href="#" class="index">首页</a>
<a href="#" class="intro">公司简介</a>
<a href="#" class="honor">企业荣誉</a>
<a href="#" class="flow">工艺流程</a>
<a href="#" class="product">产品展示</a>
<a href="#" class="sale">销售网络</a>
<a href="#" class="buy">网上订购</a>
<a href="#" class="contact">联系我们</a>
</div>
然后是CSS
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#nav{
width: 800px;
height: 31px;
margin: 10px auto;
padding-left: 21px;
background: url(images/nav/bg_nav1.png) no-repeat 0 0;
overflow: hidden;
}
#nav a{
float: left;
width: 92px;
height: 31px;
text-indent: -9999px; /*将文本缩进进行隐藏*/
text-decoration: none;
background: url(images/nav/bg_nav1.png) no-repeat 1000px 1000px;
}
#nav a:hover {
position:relative;
width:120px;
}
#nav a.index:hover {
margin-left:-10px;
background-position:-11px -31px;
}
#nav a.intro:hover {
margin-left:-10px;
background-position:-103px -62px;
}
#nav a.honor:hover {
margin-left:-10px;
background-position:-195px -93px;
}
#nav a.flow:hover {
margin-left:-10px;
background-position:-287px -124px;
}
#nav a.product:hover {
margin-left:-10px;
background-position:-379px -155px;
}
#nav a.sale:hover {
margin-left:-10px;
background-position:-471px -186px;
}
#nav a.buy:hover {
margin-left:-10px;
background-position:-563px -217px;
}
#nav a.contact:hover {
margin-left:-10px;
background-position:-655px -248px;
}
刷新下页面，效果还是不错的：
引入绝对定位的导航栏
在上一个例子中，锚点a设置为浮动的，在a的边缘处可能会指向相邻的a锚点，这时候可以尝试使用绝对定位的方式，使每个a锚点准确“空降”到指定位置，从而避免这个问题。保持HTML结构不变，对CSS稍加修改即可。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#nav{
position: relative;
width: 800px;
height: 31px;
margin: 10px auto;
padding-left: 21px;
background: url(images/nav/bg_nav1.png) no-repeat 0 0;
overflow: hidden;
}
#nav a{
position: absolute;
top: 0;
width: 92px;
height: 31px;
text-indent: -9999px; /*将文本缩进进行隐藏*/
text-decoration: none;
background: url(images/nav/bg_nav1.png) no-repeat 1000px 1000px;
}
#nav a:hover {
width:120px;
}
#nav div a.index {
left:21px;
}
#nav a.index:hover {
margin-left:-10px;
background-position:-11px -31px;
}
#nav a.intro {
left:113px; /*21+92*/
}
#nav a.intro:hover {
margin-left:-10px;
background-position:-103px -62px;
}
#nav a.honor {
left:205px;
}
#nav a.honor:hover {
margin-left:-10px;
background-position:-195px -93px;
}
#nav a.flow {
left:297px;
}
#nav a.flow:hover {
margin-left:-10px;
background-position:-287px -124px;
}
#nav a.product {
left:389px;
}
#nav a.product:hover {
margin-left:-10px;
background-position:-379px -155px;
}
#nav a.sale {
left:481px;
}
#nav a.sale:hover {
margin-left:-10px;
background-position:-471px -186px;
}
#nav a.buy {
left:573px;
}
#nav a.buy:hover {
margin-left:-10px;
background-position:-563px -217px;
}
#nav a.contact {
left:665px;
}
#nav a.contact:hover {
margin-left:-10px;
background-position:-655px -248px;
}
</style>
效果跟刚才是一个的，好麻烦的说，感觉还是用JS与JQuery比较好。这种纯CSS就当练手了
涉及层叠的导航栏
有一些导航栏具有层叠的效果，因为这里用了层叠，所以把a标签放在li中比直接使用a更好控制。上次B站登录页在关于图片和文字的部分使用了层叠属性。
关于CSS的层叠级别介绍以后会专门写一篇来介绍
先是HTML
<div id="nav">
<ul>
<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>
<li><a href="#">导航7</a></li>
<li><a href="#">导航8</a></li>
</ul>
</div>
为我们的HTML框架添加样式
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#nav {
width: 700px;
margin: 10px auto;
}
ul{
height: 25px;
list-style: none;
}
a{
text-decoration: none;
}
#nav li{
float: left;
height: 25px;
margin: 0 -7px; /*利用负边距产生层叠属性*/
text-align: center;
}
#nav a {
float: left;
width: 86px;
height: 25px;
line-height: 25px;
color: #FFFFFF;
background: url(images/nav/btn2.gif) center center no-repeat;
}
#nav a:hover {
position: relative; /*设置容器为相对定位，是元素获得层叠属性*/
z-index: 99; /* 提升锚点a标签的层叠级别 */
color: #000000;
background: url(images/nav/btn1.gif) 0 0 no-repeat;
}
对于包含有position:relative/position:absolute的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。
刷新下页面效果如下：
零零碎碎的时间凑出来真是不容易 时间真是越来越不够用了 咕~~(╯﹏╰)b