Menu Items with Lines Between

Uses html5 to create separator between menu items

HTML

<nav class="top-nav">
    <ul id="top-menu" class="top-menu">
        <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="#">Item 1</a></li>
        <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="#">Item 2</a></li>
        <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="#">Item 3</a></li>
    </ul>						
</nav>

<!-- 
-----------------------------------------
This is the result of the Wordpress Code
-----------------------------------------

functions.php
if ( ! function_exists( 'starter_setup' ) ) :
function starter_setup() {
register_nav_menus( array('top' => __( 'Top Bar Menu', 'starter' ),) );
}
endif; // starter_setup
add_action( 'after_setup_theme', 'starter_setup' );

header.php
<nav class="top-nav  pull-right">
<?php wp_nav_menu( array( 'theme_location' => 'top', 'container' => false, 'menu_id' => 'top-menu', 'menu_class' => 'top-menu' ) ); ?>
</nav>

-->

CSS

.top-nav ul { margin: 0; padding: 0; font-size: 12px;}
.top-nav li { display: inline; line-height: 36px; vertical-align: middle; text-align: right; margin: 0; padding: 20px 20px; background: red; }
.top-nav li:after { content: "|"; padding-left: 24px; padding-right: 12px;  }
.top-nav li:last-child:after { content: ""; padding: 0px; }
.top-nav, .top-nav a { color: blue; }
.top-nav a { display: inline-block;  }