Vertical and horisontal CSS menu

The CSS menu is just elements in order, which elements are clickable. Here we will create a horizontal menu. The vertical menu is based on the same principles. The difference between horizontal menu and vertical menu is that - in the horizontal menu you order the elements horizontally, in the vertical menu you order you elements vertically.

The techniques in this lesson is based on the attribute "float: left", which aligns the elements on the left.

Here is the CSS code

body {font: 14px Verdana, Arial, sans-serif;}
ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}

li { float: left;} /* lists aligned to the left */
.menu a {
margin: 0 2px;
width: 100px; /* definition of menu button size */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray;
}

.menu a:active {
background: gray;
border: 1px solid gray;
color: #fff;}