How can I add lines or gaps between menu items?

I want to add spaces or colored lines betweeen menu items but I don't want a border around the menu items. How can I do this?

Solution: Use "spacer" menu items between your "real" menu items and make them colored or transparent.

Here’s some information which will help you understand this concept:

There are three modes for borders:

1. No borders (0px borders); or
2. Borders around menu blocks;
3. Borders around menu blocks and in-between items.

There is no setting for borders between items only.

You can use different border settings for top-level and submenu items.

If a menu item is transparent, its border will also be transparent.

To have lines or gaps between menu items (either with or without any of the border settings above), you can simply add "spacer" menu items of the color you want between the "real" menu items.

The "spacers" can have transparent backgrounds to create gaps or color backgrounds for lines, rules or blocks.

To create a "spacer", simply add a menu item between two "real" menu items.

Set the size of the "spacer" menu item and it’s background color.

Don't add any text or links to the item.

Here’s an example which uses a variety of effects created with "spacers". This example uses no borders or any images.

If you roll over the menu above, you can see that the gaps really are transparent when you roll over the blue menu items. By using a combination of transparent and colored "spacer" menu items, and by varying the width and height, you can create some great effects very easily.

Try combining this technique with borders to get even more variation.

You can easily use images in "spacer" items for even more effects but remember not to add too many different images if it is going to affect download time!

Just enjoy experimenting with your menu.