it is common for websites (this one included) to have the ubiquitous '|' as a link divider, here is a neat way to do it with pure css
To get this menu:
You dont need to actually put in the '|' character, you can do it with just the following advanced css selectors:
<style type="text/css">
ul#nav li{
float:left;
margin-right:20px;
}
ul#nav li:after{
content:'|';
margin-left:20px;
}
ul#nav > li:last-child:after{
content:'';
margin-left:0;
}
</style>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Other Crap</a></li>
</ul>
I realize it's not exactly space-saving, but it is a cool trick that could be adapted to all sorts of possible situations.