<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>