Introduction to styling an unordered <ul> list as a menu

Outline of the basic steps

See the CSS for the menu here...
Download the CSS as a pdf here...

Unordered list no styling

Step 1: Target the <ul> with CSS

Remove the bullet points, margin and padding of the list

Step 2: Target the <li> with CSS

For a horizontal menu place the list items in a line*. Omit this step for a vertical menu

Step 3: Target the links <a> with CSS

Most of the styling to change the appearance is applied to the links

Or, for a vertical menu...

The CSS

The HTML for the list:

<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>
    

Step 1: Target the <ul> with CSS

Remove the bullet points, margin and padding of the list

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

Step 2: Target the <li> with CSS

Place the list items in a line, if required*. Omit this step for a vertical menu

ul li {
	float:left;
}

Step 3: Target the links <a> with CSS

Most of the styling to change the appearance is applied to the links

ul li a {
	text-decoration:none;
	color:#000000;
	background-color:#C0C0C0;
	padding: 5px 10px 5px 10px;
}

ul li a:hover {
	background-color:#FFC13B;
}

To prevent menu items from overlapping with a vertical menu, create the selector ul li and add the CSS property of margin-bottom:

ul li {
	margin-bottom:15px;
}

*important

Floating list items left will cause content in the page after the menu to move up beside it. The following CSS will fix this:

ul:after {
	content: "";
	clear:both;
	display:block;
}