Positioning

There may be times when you have a list, but you don’t want any bullets, or you want to use some other character in place of the bullet. Again, CSS provides a straightforward solution. Simply add list-style: none; to your rule and force the LIs to display with hanging indents. The rule will look something like this:

Borders

A pipe character, |, is often used to differentiate between choices. It is an obvious separating character, and can be emulated by adding borders to list items:

#pipe ul {
 margin-left: 0;
 padding-left: 0;
 display: inline;
 }

#pipe ul li {
 margin-left: 0;
 padding: 3px 15px;
 border-left: 1px solid #000;
 list-style: none;
 display: inline;
 }
 
  
#pipe ul li.first {
 margin-left: 0;
 border-left: none;
 list-style: none;
 display: inline;
 }

Here we add class="first" to the first LI so that it does not end up with a border on its left side.

Navigation

Navigation

As I mentioned previously, the menus of links that appear on nearly every site should really be marked up as lists, since that is what they are. Since we usually don’t want the default list style to apply to these links, we can use CSS to change the way they appear on the page. As we saw above, lists can be forced to display horizontally (inline) rather than stacked vertically (the default behavior). When you do this the bullet goes away and you have many choices about how to separate the list items.

These examples of horizontal lists will all use the same base DIV with the following styles:

#h-contain {
 padding: 5px;
 border: 1px solid #000;
 margin-bottom: 25px;
 }

The next two examples use the same UL as in the previous examples, but without the final list item with its extra text. They also include an additional class that sets apart one of the LIs in the list.