完全用CSS实现的导航菜单

这是我在网上看到的一个经典实例，它让我看到了CSS到无所不能（呵呵，好像说过头了），在这里将代码贴出来，并且在代码后面会加上了详细解释说明。

<style type="text/css">

#nav{

 padding: 10px 10px 0;/*如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下*/

 font-size: 12px;

 font-weight: bold;

 margin: 1em 0 0;/*em为相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 */

 list-style:none;

}

#nav li{

 float: left;/*向右浮动，浮动对象会向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。

*/

 margin-right: 1px;

}

.bi{

 position: relative;/*对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置.*/

}

.bi:hover{

 z-index: 99;/*z-index 的值越大越上面*/

}

.bi span{

 position: absolute;/*将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义*/

 left: -999em;

 visibility: hidden;/*不可见*/

}

.bi:hover span{

 visibility: visible;

 top: 0;

 left: 0;

 cursor: pointer;/*和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。*/

}

#nav li a,.bi:hover span{

 line-height: 20px;

 text-decoration: none;

 background: #DDDDDD;

 color: #666666;

 display: block;/*将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内*/

 width: 80px;

 text-align: center;

}

#nav li a:hover,.bi:hover span{

 color: #FFFFFF;

 background: #DC4E1B;

}

.bi:hover span{

 padding-top: 2px;

}

#navbar{

 background: #DC4E1B;

 height: 8px;

 overflow: hidden;/*不显示超过对象尺寸的内容，这里这么用是因为navbar没有任何内容，ie会让navbar按照默认的div的高度显示，而ff就不会了*/

 clear: both;

}

</style>

<ul id="nav">

 <li><a class="bi" href="#">Home<span>首　页</span></a></li>

 <li><a class="bi" href="#">About us<span>关于我们</span></a></li>

 <li><a class="bi" href="#">Products<span>产品展示</span></a></li>

 <li><a class="bi" href="#">Services<span>售后服务</span></a></li>

 <li><a class="bi" href="#">Contact<span>联系我们</span></a></li>

</ul>

<div id="navbar"></div>