Horizontal Menu (Float Method)

Basic List: Create an unnumbered list

Step 1: Adjust the margins and padding, and add borders for example visibility

	/* add border and containment */
	.menu { overflow: auto; margin: 1em; padding: 0.5em; border: 1px black dashed; }
	/* fix padding, margin of entire list */
	#step1 { margin: 0; padding: 0; }
	/* add border to list items */
	#step1 li { border: 1px blue solid; }

Step 2: Apply the float property to the list items (li)

	#step2 li { border: 1px blue solid; float: left; }

Step 3: As we can see, the bullets are now overlapping each other. So let's apply the 'list-style' property to the list items, and set their bullets to 'none'

 
	#step3 li { border: 1px blue solid; float: left; list-style: none }

Step 4: the items are slightly squashed, so let's adjust the padding on the text for more visibility.

	#step4 li { border: 1px blue solid; float: left; list-style: none; padding: 0 1em; }

Step 5: Using images is the preferred. With this method, images are used, but the text is visible to screenreaders, and search engines. We can also change the images through an external file, instead of the HTML itself

	#step4img li { border: 1px blue solid; float: left; list-style: none; padding: 0; }
	#menu1, #menu2, #menu3, #menu4 { display: block; text-indent: -9999px; text-decoration: none; }
	#menu1 { background-image: url(menu1.png); width: 100px; height: 30px; }
	#menu2 { background-image: url(menu2.png); width: 100px; height: 30px; }
	#menu3 { background-image: url(menu3.png); width: 100px; height: 30px; }
	#menu4 { background-image: url(menu4.png); width: 100px; height: 30px; }