用UL制作横向CSS导航菜单(2)

浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给 HTML 代码增加一个额外选择符。

<ul id="menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href="" type="text/css">
#menu li st {
border-right:0; /* 去掉左侧边框 */
}
</style>
好了，到这里一个简单的横向导航菜单就制作完成了，是不是很简单？ 下面给出完整代码：

<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif;
}
#menu, #menu li {
list-style:none;
padding:0;
margin:0;
}
#menu li {
float:left;
}
#menu li a {
display:block;
/* 如果是中英文混排的文字，建议用固定宽度
width:150px;
height:30px;
line-height:30px;
text-align:center;
*/
padding:8px 50px;
background:#3A4953;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li a:hover {
background:#146C9C;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li st {
border-right:0; /* 去掉左侧边框 */
}
</style>


<ul id="menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href="
"></a></li>
<li><a href="" >