Vertical dividers on horizontal UL menu

Question

I'm trying to create a horizontal navigation bar (no dropdown, just a horizontal list), but I'm having trouble finding the best way to add vertical dividers between the menu items.

The actual HTML is as follows:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

The current CSS is as follows:

.menu li {
  display: inline;
  margin-left: 25px;
  padding-left: 25px;
}

Between each menu item I want a small image as a vertical divider, except that I don't want a divider shown before the first item and I don't want a divider shown after the second item.

The end result should look something like this:

Item 1 | Item 2 | Item 3 | Item 4 | Item 5

Just replacing the pipe with an actual image.

I've tried different ways - I've tried setting the list-style-image property, but the image didn't show up. I've also tried setting the divider as a background which actually more or less worked except that it made the first item have a divider in front of it.

score 117 · Accepted Answer · edited Sep 13 '16 at 20:03

117

Quite and simple without any "having to specify the first element". CSS is more powerful than most think (e.g. the first-child:before is great!). But this is by far the cleanest and most proper way to do this, at least in my opinion it is.

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li:not(:first-child):before {
    content: " | ";
}

Now just use a simple unordered list in HTML and it'll populate it for you. HTML should look like this:

<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div><!-- navigation -->

The result will be just like this:

HOME | ABOUT US | SUPPORT

Now you can indefinitely expand and never have to worry about order, changing links, or your first entry. It's all automated and works great!

edited Sep 13 '16 at 20:03

Jerad Rose

15,235
18
82
153

answered Jun 15 '12 at 14:14

David Cahill

1,477
1
10
12

You sir are awesome. This method worked for me very well. Since it is all done in CSS, it will be very simple if I need to make changes. – ArtisanSamosa Dec 27 '12 at 20:54
3

Have you considered `:not(:first-child):before` – automaticAllDramatic Apr 13 '13 at 18:11
7

Note that the final two rules can be consolidated into one: `#navigation li + li:before { content: " | "; }` – rinogo Aug 31 '15 at 22:06

score 30 · Answer 2 · answered Jan 05 '13 at 08:52

30

try this one, seeker:

li+li { border-left: 1px solid #000000 }

this will affect only adjecent li elements

found here

answered Jan 05 '13 at 08:52

vladkras

16,483
4
45
55

This is just awesome! – frazras Nov 10 '17 at 02:05

Campbeln · Answer 3 · 2017-02-27T19:47:57.440

This can also be done via CSS:pseudo-classes. Support isn't quite as wide and the answer above gives you the same result, but it's pure CSS-y =)

.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }

OR:

.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }

See: http://www.quirksmode.org/css/firstchild.html
Or: http://www.w3schools.com/cssref/sel_firstchild.asp

score 2 · Answer 4 · answered Dec 20 '09 at 19:19

2

I think your best shot is a border-left property that is assigned to each one of the lis except the first one (You would have to give the first one a class named first and explicitly remove the border for that).

Even if you are generating the <li> programmatically, assigning a first class should be easy.

answered Dec 20 '09 at 19:19

Pekka

442,112
142
972
1,088

1

It's even safe to rely on [CSS 2.1 Selectors](http://caniuse.com/#feat=css-sel2) and use `ul > li:first-child` to target that first element without adding any extra markup. – Wex Sep 14 '11 at 19:30
Just also pointing out that he asked for an image divider rather than a side-border, but essentially the same idea (giving a background-image to the `
`)

Wex

Sep 14 '11 at 19:37

score 2 · Answer 5 · answered Sep 16 '14 at 19:31

2

A simpler solution would be to just add #navigation ul li~li { border-left: 1px solid #857D7A; }

answered Sep 16 '14 at 19:31

newbie

448
2
8
25

score 1 · Answer 6 · edited Sep 14 '11 at 19:25

1

.last { border-right: none

.last { border-right: none !important; }

edited Sep 14 '11 at 19:25

Jérôme Verstrynge

57,710
92
283
453

answered Jul 11 '10 at 22:19

Scott

11
1

score 0 · Answer 7 · answered Nov 27 '17 at 11:36

This works fine for me:

NB I'm using ~~BEM/OCSS~~ SCSS Syntax

#navigation{
  li{
     &:after{
        content: '|'; // use content for box-sizing
        text-indent: -999999px; // Hide the content
        display: block;
        float: right; // Position
        width: 1px;
        height: 100%; // The 100% of parent (li)
        background: black; // The color
        margin: {
          left: 5px;
          right: 5px;
        }
      }

      &:last-child{

        &:after{
          content: none;
        }

      }
  }
}

score -2 · Answer 8 · edited Oct 04 '12 at 09:12

-2

I do it as Pekka says. Put an inline style on each <li>:

style="border-right: solid 1px #555; border-left: solid 1px #111;"

Take off first and last as appropriate.

edited Oct 04 '12 at 09:12

j0k

22,600
28
79
90

answered Aug 15 '12 at 13:14

Martin

1

Vertical dividers on horizontal UL menu

8 Answers8

Linked