List are nice. They are easy to build with html and using css can be hooked to style pretty much any way you want. Here is a very simple trick to horizontally style a list and place a vertical bar between every item but not on the ends.

@import "compass/utilities"


    border-left: 1px solid
    border-right: 1px solid
    margin-top: 2px
    margin-bottom: 2px

    border-right: 1px solid
    border-left: 0 none

    border-left: 1px solid
    border-right: 0 none

First of all we import the compass utilities libraries where we find two mixins for dealing with lists.


That does the bulk of the work for us. Then we need to add the vertical bars. First we style the list items to have solid left and right borders. Then we specialize only the first and last item in the left to have right and left border respectively.

Now it is bad form to use .simplenavigation in your html directly. .simplenavigation describes a style of a list. We should use semantic names for each horizontal list we require. We can also specialize the simple navigation using further mixins or extensions.

    @extends .simple_navigation

    @extends .simple_navigation

Then #mainmenu is a horizontal list with dividers and large text and #footermenu is a horizontal list with dividers and small text

So then the following haml

    %li item 1
    %li item 2
    %li item 3

will end up something like below

item 1 | item 2 | item 3 | item 4