bullet between horizontal nav?

I have horizontal menu with vertical lines between the items. The current code takes advantage of a “first” class added only to the first menu item. I can’t figure out how to do this in WordPress. Can someone please help me?

The current menu looks like this:

First | Second | Third | Last

NOTE: In this example “Third” is the active page, and appears bold.

The current html code looks like this:

<div class=”nav”>
<ul class=”menu”>
<li class=”menu-item first”>First
<li class=”menu-item”>Second
<li class=”menu-item active”>Third
<li class=”menu-item last”>Last

</div>

Stylesheet looks like this:

.nav ul {
padding: 8px 20px;
list-style-type: none
}

.nav li {
float: left;
padding-left: 10px;
padding-right: 10px;
border-left: 1px #b3b3b3 solid
}

.nav li.active, .nav li.active a {
font-weight: 800;
}
.nav li.first {
border-left: none;
padding-left: 0
}