Menú horizontal

Para conseguir en CSS un menú como el siguiente

opcion 1

opcion 2

opcion 3

Se escribe algo así

<div style="text-align:center;float:left;width:32%;border-style:solid;border-width:1px;border-color:red;">opcion 1</div>
<div style="text-align:center;float:left;width:32%;border-style:solid;border-width:1px;border-color:red;">opcion 2</div>
<div style="text-align:center;float:left;width:32%;border-style:solid;border-width:1px;border-color:red;">opcion 3</div>

text-align:center; para que el texto quede centrado dentro de la caja
float:left; para que la caja se pegue al lado izquierdo, si queda libre. La primera ira al lado izquierdo, la segunda se pegará a la primera y la tercera a la segunda
width:32%; para que cada caja ocupe aproximadamente la tercera parte del espacio disponible, quedando el menú horizontal ocupando casi todo el ancho de la página.
border-style:solid; para que las cajas queden rodeadas de una línea
border-width:1px; para que la línea que rodea las cajas sea de 1 pixel de ancho
border-color:red; La línea de color rojo.

Por supuesto, donde va el texto "opcion x" se puede poner un link para dar sentido al menú. También sería bueno no repetir tantas veces lo mismo, poniendo en una hoja de estilo separada algo como esto

/* fichero estilo.css */
div.opcionmenu {
text-align: center;
border: 1px solid red;
width: 32%;
float:left;
}

y luego en la página

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="estilo.css"/>
	</head>
	<body>
		<div class="opcionmenu">opcion 1</div>
		<div class="opcionmenu">opcion 2</div>
		<div class="opcionmenu">opcion 3</div>	
	</body>
</html>

Puede conseguirse el mismo efecto, con CSS3, utilizando flexbox