中间用斜线分开的CSS菜单导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>中间用斜线分开的CSS菜单导航条_网页代码站(www.webdm.cn)</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: small;
    }
    #header {
    padding: 20px;
    background: #333;
    border-bottom: 1px solid #fff;
    }
    
    #header h1 {
    padding: 0;
    margin: 0;
    color: #ccc;
    font-size: 180%;
        }

    #nav {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #ccc;
    border-bottom: 1px solid #999;
    }
    #nav li { 
    float: left;
    margin: 0;
    padding: 0;
    }
    
    #nav a {
    float: left;
    display: block;
    padding: 6px 30px 6px 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 90%;
    color: #666;
    background: #ccc url(http://www.webdm.cn/images/20090910/nav_slant.gif) no-repeat top right;
    }
    #nav #nav-1 a {
    padding-left: 20px;
    }
    #nav a:hover {
    color: #000;
    }
    </style>
</head>
<body>
<div id="header">
<h1>网页代码站</h1>
</div>
<ul id="nav">
    <li id="nav-1"><a href="http://www.webdm.cn">网站首页</a></li>
    <li id="nav-2"><a href="#">CSS教程</a></li>
    <li id="nav-3"><a href="http://www.webdm.cn">JavaScript点滴</a></li>
    <li id="nav-4"><a href="http://www.webdm.cn">Ajax拾趣</a></li>
</ul>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/dceda070-918d-4805-9fff-6ddca46b2828.html