Easy and nice CSS trick to convert a humble HTML list into a horizontal menu bar. Start with your basic HTML list:

<ul class="menuList"> 
    <li><a href="#">Home</a></li>
    <li><a href="#">Contacts</a></li>
    <li><a href="#">Products</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">News</a></li> 
    <li><a href="#">Events</a></li>
 </ul> 

Add the following styles.

ul.menuList, ul.menuList li{
   margin:0;
    padding:0;
    list-style:none;
    display:inline;
}
ul.menuList li a{
    border-left:1px solid #666;
    padding-left:5px;
    text-decoration:none;
}
ul.menuList li:first-child a{
    border-left:none;
}
ul.menuList li a:hover{
    text-decoration:underline;
}

See a working demo here

To create the dividers a border-left property is applied to all the links.  However, we don’t want this on the first list item, so we make use of the pseudo-class ‘first-child’ .  This targets the first list item and then sets the border to none.

Leave a Comment