Simple CSS footer menu

Ever been tempted to hard code pipe characters (vertical bars) between anchor tags to quickly produce a simple menu? Here I am in an effort to stop you.

The markup you could use and the one you should use

This is the quick and dirty (semantically challenged I’d say) markup you could use for a secondary navigation like a footer menu:

<a>Privacy Policy</a> | <a>Terms of Use</a> | <a>Contact</a>

…See those pipe line separation characters? Their soul purpose is to visually delimit elements. They have no business in the markup.

And this is the elegant markup (you already know) you should use:

 <li><a>Privacy Policy</a></li>
 <li><a>Terms of Use</a></li>

So elegant you’ll wanna wear it to a wedding.

The CSS code


Save this code for quick reference, or bookmark this URL — if you’re like me, you’ll need it each time you start a new project.

Simple Footer Menu


The above CSS snippet will affect all unordered lists on your page. I intentionally left it like that so you can change it to something more specific like:

#footer ul {...}
#footer ul li {...}
#footer ul li:after {...}
#footer ul li:last-child:after {...}
#footer ul li a {...}
Posted in blog Tagged with: ,
5 comments on “Simple CSS footer menu
  1. jmmh says:

    my list in all document change :(

    this the code:

    nav.footer {

    nav.footer ul {

    ul li:after {
    content:”|”; /* Or go Facebook style and use “·” (the interpunct character) for separators */
    color:#666; /* You may want to make the separators a bit more subtle than the base text color */

    ul li:first-child:after { content:””; /* No separator for the last item in the list */ }

    nav.footer ul li {
    padding:0 10px 0 6px;


    • Stefan Matei says:

      I didn’t really understand the “my list in all document change” part, but I got it now.

      Please read my “Notes” at the end of the post.
      In your case, you’ll need to add “nav.footer ” in front of “ul li:after” and “ul li:first-child:after”.

      You added it everywhere else except for those two selectors :)

  2. Nowhere says:


    Good job but the menu always aling to the left.

    Use instead

    footer ul li {
    display:inline; // Put on one line. You can align after!

1 Pings/Trackbacks for "Simple CSS footer menu"