[Twenty Twelve] Menu Seperators

Hi All

I am trying to add menu separators | to my child theme of twenty twelve.

I was adding them using:

ul li:after {
content: “|”;
}

Problem is two fold, first, padding wise, I can’t get it to sort itself out and it’s all over the place. I just want the menu evenly spaced with the | And secondly, if I use that code, they then also add to the drop down menus, and I can’t see how to stop that happening. I only want them on the top level navigation.

I fear I have messed about so much with the css for the menus they’re a css-nightmare.

This is the site

I’d welcome some help in sorting this one out please.

Thanks