HTML horizontal list without bullets

Tutorial 4 - Horizontal lists - all steps combined

There are many methods that can be used to making a horizontal list. The main ingredient is "display: inline", applied to the "LI" element.

CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

HTML CODE

Step 1 - Make a basic list

Start with a basic unordered list. The list items are all active [wrapped in ] which is essential for this list to work. Some CSS rules are written exclusively for the "a" element within the list items. For this example a "#" is used as a dummy link.

Step 2 - Remove the bullets

To remove the HTML list bullets, set the "list-style-type" to "none".

#navcontainer ul { list-style-type: none; }

Step 3 - Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding [Mozilla, Netscape, Safari] and others use margins [Internet Explorer, Opera] to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

Step 4 - Display inline

To force the list into one line, apply "display: inline;" to the "LI".

CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

Step 5 - Removing text decoration

At this point you may wish to remove the text underline. It is a common practise for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour [such as underlines] can be confusing for some users, who may not realise that the item is a link.

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; }

Step 6 - Padding around list items

To make each list item into a box, we need to add padding to the "a" element.

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
}

Step 7 - Adding background color

At this point a background color and border can be applied. There are many combinations of border and background colors that can be used.

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

Step 8 - Add a rollover color

Use "a:hover" to set a second background color, as a rollover. Roll over the list now you will see how it works.

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

Step 9 - Center the list

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

Finished!

« Back to main menu

Other Max Design articles and presentations
Associated with webstandardsgroup.org