竖线间隔导航

CSS

<style type="text/css" title="default" media="screen">
.nav {
    width:408px;/* 这个宽度一定要按li中的宽度算好 */
    float:right;
    display:inline;
    overflow:hidden;
}
.nav ul {
    margin:0;
    padding:0;
    font-size:12px;
    
    list-style-type:none;
}
.nav li {
    float:right;
    height:auto;
    text-align:center;
    padding:0 10px;
    border-right:1px solid #444;
    margin-right:-1px;
}
.nav li a{ display:block;text-decoration:none;}
.nav li a{ display:inline;}
.nav li a:hover { color: #ff0; background-color: #f00;}   

</style>  

 HTML:

<div class="nav">
  <ul>
    <li><a href="show.htm">产品展示</a></li>
    <li><a href="case.htm">成功案例</a></li>
    <li><a href="service.htm">客户服务</a></li>
    <li><a href="download.htm">下载中心</a></li>
  </ul>

</div>