How give more style on a CSS /Jquery Menu Bar

Long time!! :)

I would appreciate if someone can help me with this, it's a jquery menu that I've been using for my website, I would like to know if it's possible to:

Menu Bar at Jsfiddle

Put some vertical line separator on each option of the menu to separate them without being affected by the hover effect like the text option.
add to the menu on the corner end on the right a small ''social media'' icons (img) each one directing to a specific link just like the text menu. The menu fits the website content (940px width) and has extra space but in the fiddle example it doesn't show.
also important> is there a way to add a bigger text on the menu and make each menu word option bigger by stretching it? Looks pretty small.Horizontally I mean, vertically it stays the same.

It's important that the underline hover and the rest appears the same just like it's shown in jsfiddle without being affected by these possible changes.

I would deeply appreciate it!!! :)

Solution

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 set letter-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.