WordPress – TwentyTen theme Tip: Menu Divider or Separator using CSS and Image Backgrounds

Using WordPress TwentyTen theme?
What to use an image to separate the top-level menu items?
Find out how below, using CSS and a background image on the menu list.

First off here is my slightly modified Twenty Ten menu area.
I’ve added a wine background colour and used Cufon to display a nice menu font.

Here is the default menu.

I want a dot image to be inserted between each menu link, to separate them, and gernerally improve the overall look. Here is the image I have used – it is a transparent .png dot image.

In order to achieve this you can modify the CSS by adding a background image to the menu.li. But make sure that #access .menu-header ul, div.menu ul is set to list-style: none; so there are no conflicts

#access .menu-header ul,
 div.menu ul {
 margin: 0;
 list-style: none;
 }

#access .menu-header li, div.menu li
 {
 float: left;
 position: relative;
 padding-left: 18px;
 background-image:
url(http://liviah.com/wp-content/uploads/2012/01/dot-separator.png);
 background-repeat: no-repeat;
 background-position: 0 .2em;
 }

However that puts an image in front of every menu listing, and for asthetic reasons we want to remove the one to the left of HOME.

So we set the background of that menu item to ‘none’. Generally in all CSS lists, the first bullet is called ‘first-child’.
Let’s set the background to none for that bullet. See below.

div.menu li:first-child
 {
 background:none;
 }

Hopefully you find this of some use. Any queries drop me a line or comment below.