Create a simple menu with CSS

Create a simple menu with CSS and HTML. Very easy and nice.

HTML

Step 1

First off, you need to start by typing down some HTML. So we are going to set up all the div classes first.

Step 2

Now we need to set up the menu items so we are able to style the menu buttons.

Home
 
Images
Website
About
Contact

Step 3

So when we put it all togheter we need to put the menu items into the 'menu' class. Like this;

Home
 
Images
Website
About
Contact
 

CSS

Step 1

In the css, first of all we need style the 'menu' class. So we need to set the width and the height of the total menu.

.menu{
	width: 600px;
	height: 100px;
}

Step 2

Now we need to style the menu bar a bit. A white background and then round the corners with 5 px.

.menu{
	background-color: #FFF; /* This makes the background white */
	border-radius: 5px; /* This rounds the corners of the 'menu' */
}

Step 3

Now we to center the menu items.

.menu{
	text-align: center; /*This center eveything that is inside the class 'menu'*/
}