Simple CSS menu separators for navigation
Use CSS to Insert an unobtrusive image or a symbol as a separator between unordered or ordered list items that function as a navigation menu.
In order to place separators between ordered (<ol>
) or unordered (<ul>
) list items (<li>
) that form part of a horizontal menu, use the following CSS code for placing an image-based separator as a background image between menu items:
#nav li + li {
background:url('separator-image.png') no-repeat top left;
padding-left: 10px;
}
This CSS code adds the image to every list item that follows another list item, so the result will be to place a separator to the left of each list item except the first. Being a background image, the separator will not be clickable.
If you prefer to use the “pipe” (ie |) as the separator (or any other character), use the following CSS code instead:
#nav li + li:before {
content: " | ";
padding: 0 10px;
}
Both of these pieces of code will work for a list, such as the example below:
<ul id="nav">
<li><a href="page1.htm">Menu Item 1</a></li>
<li><a href="page2.htm">Menu Item 2</a></li>
<li><a href="page3.htm">Menu Item 3</a></li>
...
</ul>
Comments
One response to “Simple CSS menu separators for navigation”
When the list wraps due to a smaller screen size, how do we prevent the first items on the wrapped rows having a pipe before the object?