separator between menu items

I’ve been searching a lot but nothing has been really effective on my question. So here it is:

How can I add a vertical character separating the menu items? Such as this:

Home | Products | Services | Contacts

I tried a lot of things but some undesired things happen (menu becomes a vertical list; all separators appear together, right after all the gathered menu items; things lose their alignement)

So, I ask for your help on building “The Ultimate (and simple) Guide To Your Vertical Character Separator Of Menu Items”

Thank you so much!