La necesidad de crear menús horizontales se hace imprescindible a la hora de maquetar un sitio web, sobre todo si no se quieren utilizar tablas para ello. Y no es para menos, pues con las listas se puede maquetar fácilmente un menú y darle un estilo agradable con pocas líneas de código.

El truco está en la forma en el que se muestra cada item (elemento li) del menú, para ello hacemos uso de la propiedad de CSS “display”, quedando el código así:

li {display:inline;}

Y el código HTML sería algo tan simple como esto:

<ul>
	<li>Elemento 1</li>
	<li>Elemento 2</li>
	<li>Elemento 3</li>
	<li>Elemento 4</li>
</ul>

Gracias a esto, podemos hacer menús de un tono armonioso (para los que tienen una buena habilidad creativa) o hacer algo simple como el siguiente ejemplo (en donde también dejo el código fuente):

Crear menú horizontal con listas y CSS

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de listas horizontales</title>
<style type="text/css">
 
#menu li {
	display:inline;
}
 
#menu a {
	background-color: #517a7d;
	color:#fff;
	text-decoration:none;
	padding:5px;
	font-family: 'Bookman Old Style', serif;
	font-size:13px;
	border-radius:3px;
	font-weight:bold;
	text-shadow:1px 1px 0px #000;
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter:alpha(opacity=7);
}
 
#menu a:hover {
	text-decoration:underline;
	background-color:#197981;
	box-shadow:1px 1px 0px #000;
}
</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">Elemento 1</a></li>
	<li><a href="#">Elemento 2</a></li>
	<li><a href="#">Elemento 3</a></li>
	<li><a href="#">Elemento 4</a></li>
</ul>
</body>
</html>