Main content begins here

Style Unordered List of Links or Menu with CSS Divider

Saturday, May 9, 2009

In this article we'll discuss creating an unordered list of menu links with a pipe in between, which is an oft-used styling for navigation, particularly in the footer of a site. Of course, feel free to use whatever divider you'd like instead of a pipe, however just know that if you want pure CSS with no image used for the divider, you can only use straight lines and dotted/dashed lines. So for example if you wanted to use the colon symbol (:) for your divider you'd need an image unless you wanted to try the not-so-well-supported :after trick.

I still often see folks coding lists of links with no ul/li structure. Usually they just do something like:
<a href="#">link 1</a> | <a href="#">link 2</a> |<a href="#">link 3</a>

Proper Unordered List Styling

Lists of menu links should always be in list format, because its a list. So it should remain UL/LI format like so:

<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>

In your CSS, apply a background "pipe" image to every LI at the far left and add left padding. Then try a declaration such as: li:first-child {background:none; padding-left:0;} (your real code may vary of course since if you want to target this specific list you will need other classes involved.) This should work in FireFox and IE7/8. Other browsers such as IE6 may require jQuery or other workarounds to listen to the ":first-child" part of the declaration. Your CSS would look something like this:

ul, li { margin: 0; padding: 0; }
li { padding: 0 5px 0 9px; background: url(pipe.gif) 0 .3em no-repeat; list-style-type: none; display: inline; }

UL/LI List CSS Styling Help

You can also do the border-left way suggested above. I offered the pipe option because from years of creating sites I know that often designers do not want the pipe to be the exact height of the list item. This would often lead to extraneous spans just to get the pipe to be the "right" height that the designer wanted (and the client approved). Although a background pipe doesn't scale if the font is resized, it will keep the designers and the clients happy that you "coded it right". If you or your clients aren't picky, the border option is easier and scalable.

On a final note: doing lists this way, as inline, can lead to spacing issues because not all of the space between to items is abolished in this situation. Notice the padding declaration above is uneven (padding: 0 5px 0 9px). To get rid of all the space you'll need to float the <li> instead of changing them to inline. Then you'll need to clear the containing <ul>.

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <h2> <br> <img>
  • Lines and paragraphs break automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Absolutely awesome job John!!! They're going to love all of these [logo designs]. The only problem I see is that they can only pick one of them!
L. H., New Media Consultant
Copyright ©2001-2018 Way Cool Web Design LLC. All Rights Reserved.