– How to add separators | Divider images in Horizontal menu for the Twenty Ten theme
– Adding a divider image to your WordPress menu
– Adding a divider stroke to your menu
– Adding a separator between your navigation links

I thought I’d take the time to post this as it took me a while to get it right after trying a variety of CSS code variations.
It was after trying all of them that I realized that a css style was still needed to be added to make it work

1- open your style.css file

2- scroll down the “menu” section of your css (twenty ten section starts with     /* =Menu)

3- make sure to “first” upload your gif image to your server, mine for instance was located in:

http://yoursite.com/images/navdivider.gif

(for reference the file was 2×46 pixels solid grey)

4- paste in this line of code (though swap out your own site info) into your style.css file

#access li { background: url(http://yoursite.com/images/navdivider.gif) no-repeat right center;}

5- SAVE

_____________________________________________________

How to add “just” a stroke to this menu (instead of image) as a divider

1- follow steps 1-2 above

2- scroll down to the section noted below, and add this new line of code

#access a {border-right: 1px solid #525252;}

3- SAVE