Lists can be used good for menus. And this is how the HTML-Code with example-items looks like:

1
2
3
4
5

<ul id="mymenu">
<li><a href="http://www.example.com">Link 1</a><li>
<li><a href="http:/www.example.com">Link 2</a><li>
<li><a href="http:/www.example.com">Link 3</a></li>
</ul>

For identification of the menu, we use the id-tag. In the example, wie name it "mymenu".

This HTML-Code is universally valid, no matter if used for vertical, horizontal or mixed menus, everything is possible. We arrange the menu using only css.

A vertical Menu

Now we want to design a vertical menu which looks like that:

The css looks like that

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

 (1) 
#mymenu {
	margin:0px;
	padding:0px;
	list-style-type:none;
	background:url(http://xairro.com/images/cssmenus/background.png) repeat-y;
}
 (2) 
#mymenu li {
	width:160px !important;
	width:180px;
	height:30px !important;
	height:50px;
	padding:10px;
}
 (3) 
#mymenu li a {
	 (3.1) 
	display:block;
	width:160px;
	height:30px;
	 (3.2) 
	background:#FF0000;
	color:#FFFFFF;
	text-decoration:none;
	text-align:center;
	font-weight:bold;
	font-size:20px;
	line-height:30px;
}
 (4) 
#mymenu li a:hover {
	background:#000000;
}

(1)

Here, the margins of the list's main part and the bullets are removed.

(2)

The list entries are the containers for the hyperlinks. Width and height with !important is a hack for Internet Explorer so he displays everything correctly.

(3)

In this part the hyperlinks are discribed. At (3.1), important data is set: "display:block;" is assigned to to the links. At (3.2) "Button" is just designed.

(4)

The hover-effect of the buttons is set.

A horizontal menu

The following menu shall be horizontal:

And this is how the css looks like:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#mymenu {
	margin:0px;
	padding:0px;
	list-style-type:none;
}
 (1) 
#mymenu li {
	float:left;
	width:160px;
	height:30px;
}
#mymenu li a {
	display:block;
	width:160px;
	height:30px;
	background:#FF0000;
	color:#FFFFFF;
	text-decoration:none;
	text-align:center;
	font-weight:bold;
	font-size:20px;
	line-height:30px;
}
#mymenu li a:hover {
	background:#000000;
}

This menu is very similiar to the previous one. Just the a-tag was set to the same size as the li-tag. The horiontal order is a result of float at (1).

In our example, the items' width is fixed. In order to make them variable, just remove the width-declarations.