I've been looking at the source code of the browser, the templates images (Musicity in my case)
The menu items are separated by vertical lines, I changed this in the template images folder into the image I wanted,
then changed menu.css, because the image needed to move a bit to the right.
Here's the code:
/* Extra menu */
#gkMainNav { min-height:42px; line-height:42px; background: transparent url('../images/horizontal_line.png') repeat-x 0 0; }
#gkMenu { min-height:42px; line-height:42px; background: transparent url('../images/horizontal_line.png') repeat-x 0 41px; }
div.gk-menu ul > li,
div#gkDropMain ul > li { background: url('../images/vertical_line.png') repeat-y right center; min-height:28px; line-height: 28px; margin:7px 10px; text-transform: uppercase; }
div.gk-menu ul > li a,
div#gkDropMain ul > li a { color:#9f9f9f; display:block; min-height:28px; line-height:28px; padding:0 20px; font-size:17px; margin:0 10px;}
div.gk-menu > ul > li.active > a,
div#gkDropMain > ul > li.active > a { color: #fff; }
In Red is what I added to move the images to the right. If you have no vertical lines between Menu items, you might have to add the line gkDropMain containing /vertical_line.png and make an image or icon called vertical_line.png (vertical_line can be changed in whatever you want, as long as it is the same in menu.css and in the image folder)
Of course this only works when you need the same image for every menu item...
Hope this helps!