<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;border-right:1px solid red;
}
/* !!!!!!!!!!!!!! PASTE ANSWER HERE TO MAKE THE FIX !!!!!!!!!!!!!!!! */
</style>
</head>
<body>
  <p>Hello from JS Bin</p>
  <p id="hello"></p>
  <ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</body>
</html>

O/p: Itemone | item2 | Itemthree | Itemfour |

if you want remove last border then use css
#navlist li:last-child { border-right:0px; }
Then o/p : Itemone | item2 | Itemthree | Itemfour

Note : ie7 and ie8 not supported.

AnotherExample:

<div>
	<ul>
		<li><a href="#">Home</a></li> 
		<li><a href="#">Contact Us</a> 
			<ul> 
				<li><a href="#">Directions</a></li> 
			</ul> 
		</li> 
		<li><a href="#">About Us</a></li> 
	</ul>
</div>

.menu.nav ul li a {display:block;  padding:0 20px; margin:10px 0; 
line-height:35px; text-decoration:none; border-right:1px solid #ccc;}

.menu.nav ul li a:last-child {border:none;}