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   lt ul gt     lt li gt Item 1 lt  li gt     lt li gt Item 2 lt  li gt     lt li gt Item 3 lt  li gt     lt li gt Item 4 lt  li gt     lt li gt Item 5 lt  li gt   lt  ul gt   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

User · Answer

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  lt li gt  programmatically  assigning a first class should be easy

User · Answer

try this one  seeker   li li   border-left  1px solid  000000     this will affect only adjecent li elements  found here

User · Answer

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    lt div id  navigation  gt       lt ul gt           lt li gt  lt a href     gt Home lt  a gt  lt  li gt           lt li gt  lt a href     gt About Us lt  a gt  lt  li gt           lt li gt  lt a href     gt Support lt  a gt  lt  li gt       lt  ul gt   lt  div gt  lt  -- navigation -- gt    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

User · Answer

This works fine for me   NB I m using  BEM OCSS SCSS Syntax   navigation    li        amp  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                            amp  last-child            amp  after            content  none

User · Answer

I do it as Pekka says  Put an inline style on each  lt li gt    style  border-right  solid 1px  555  border-left  solid 1px  111     Take off first and last as appropriate

User · Answer

last   border-right  none   last   border-right  none  important

User · Answer

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

User · Answer

A simpler solution would be to just add  navigation ul li li   border-left  1px solid  857D7A

[html] Vertical dividers on horizontal UL menu

Examples related to html

Examples related to css

Examples related to markup