设计水平导航条

HTML

<div id="pageHeader">
    <h1><span>CSS Zen Garden</span></h1>
    <h2><span><acronym title="cascading style sheets">CSS</acronym>设计之美</span></h2>
    <ul class="menu">
        <li> <a href="# "> <b><span>查看样式表CSS</span></b><em></em> </a> </li>
        <li> <a href="# "> <b><span>CSS参考资料</span></b><em></em> </a> </li>
        <li> <a href="# "> <b><span>常见问题</span></b><em></em> </a> </li>
        <li> <a href="# "> <b><span>投稿</span></b><em></em> </a> </li>
        <li> <a href="# "> <b><span>翻译文件</span></b><em></em> </a> </li>
    </ul>
</div>
					    

CSS

.menu {
	position:absolute;
    top:120px;
    left:40px;
    padding:0;
    margin:0;
    list-style-type:none;
    white-space:nowrap;
}
.menu li {
    float:left;
    min-width:100px;
}
.menu a {
    position:relative;
    display:block;
    text-decoration:none;
    min-width:100px;

}
* html .menu a {
    width:100px;
}
.menu a span {
    display:block;
    color:#F911B2;
    background:#FFF4FC;
    border:solid #fff;
    border-width:0 2px 2px 2px;
    text-align:center;
    padding:4px 16px;
    cursor:pointer;
    min-width:66px;    
}
* html .menu a span {
    width:100px;
    cursor:hand;
    w\idth:66px;
}
.menu a b {
    display:block;
    border-bottom:2px solid #F911B2;
}
.menu a em {
    display:none;
}
.menu a:hover {
    background:#fff;
}
.menu a:hover span {
    color:#fff;
    background:#F911B2;
}
.menu a:hover em {
    display:block;
    overflow:hidden;
    border-style:solid;
    border-color:#F911B2 #fff;
    border-width:6px 6px 0 6px;
    height:3px;
    position:absolute;
    left:50%;
    margin-left:-6px;
}