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; }
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.