There are a few CSS and markup changes you can make to achieve what you'd like
#example-one { margin: 0 auto; list-style: none; position: relative; width: 940px; font-family:Arial; }
#example-one li a { color: #bbb; font-size: 14px; letter-spacing:2px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; border-right: 1px solid white; }
#example-one li:first-child a { border-left:1px solid white; }
- On the first line, you can add your
font-family
to change the font used in your menu. - On the second line, I added a
border-right
, and setletter-spacing:2px
. - I added the third line to give a
border-left
to only the first item (so that you get the full appearance of separators).
Also I added this item to your list that you could easily insert a social media icon into:
<li style="float:right;"><a style="border:none;" href="#">Social Icon</a></li>
You can push it to the right side of the menu using float:right
.
Here is an updated fiddle.