就是在水平菜单的选择项中间加上一竖线当作分隔符。
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>菜单</title>
<style type="text/css" title="default" media="screen">
ul { padding:0; margin:0; font:0.9em Verdana; }
li { display:inline; color:green; }
li~li:before { content:"|"; padding-right:5px; color:red; }
li a{ display:block;text-decoration:none;background:#CC99CC;}
li a{ display:inline;}
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li><a href="http://www.cnblogs.com/rubylouvre/">menu2</a></li>
<li>menu3</li>
<li>menu4</li>
</ul>
</body>
</html>
或利用相邻选择符加after伪类。
或利用相邻选择符加after伪类。
由于IE6不支持，我们可以利用负margin技术变通一下，但还是要多添加一个类……
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>菜单</title>
<style type="text/css" title="default" media="screen">
ul { padding:0; margin:0; font:0.9em Verdana; }
li { display:inline; color:green; padding:0 5px;border-right:1px solid red;margin-left:-1px;}
li a{ display:block;text-decoration:none;background:#CC99CC;}
li a{ display:inline;}
li.last {border-width:0;}
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li><a href="http://www.cnblogs.com/rubylouvre/">menu2</a></li>
<li>menu3</li>
<li class="last">menu4</li>
</ul>
</body>
</html>