Menu de navegação horizontal

Voltei a trabalhar com web nas últimas semanas. Uma coisa que precisei fazer foi um menu horizontal para navegação geral. Há milhares de exemplos disso por aí, mas eu precisava de um pequeno detalhe a mais: uma imagem personalizada para a lista de itens do menu.

Para começo de conversa, as implementações desse tipo de menu usam listas (tag ul e li) com atributos de estilo para tornar a listagem horizontal. Pode ser display: inline ou float: left. O código fica assim:

HTML:

	<div id="nav-menu">
	<ul>
	<li>Regulamento</li>
	<li>Inscrições</li>
	<li>Dúvidas frequentes</li>
	<li>Sobre o programa</li>
	</ul>
	</div>

view raw nav-menu.html hosted with ❤ by GitHub

E o CSS para deixar horizontal pode ser:

	#nav-menu li {
	margin-right: 12px;
	display: inline;
	}

view raw inline.css hosted with ❤ by GitHub

ou

	#nav-menu ul
	{
	list-style: none;
	}
	#nav-menu li {
	margin-right: 12px;
	float: left;
	}

view raw float.css hosted with ❤ by GitHub

Aí podemos colocar a imagem para a listagem com o atributo list-style-image e colocando a URL da imagem:

	#nav-menu ul{
	list-style: none;
	list-style-image: url('../img/triangulo.png');
	}
	#nav-menu li {
	margin-right: 12px;
	float: left;
	}

view raw with_image.css hosted with ❤ by GitHub

Mas isso só funciona para o float: left, tá?

Agora o pulo do gato: cada navegador coloca um espaçamento diferente do lado esquerdo desta nossa imagem! Qual propriedade ajusta isso? Nenhuma!
Contornei este problema usando esta mesma imagem como fundo do elemento de lista e ajustando o espaçamento do lado esquerdo (padding-left) com o mesmo tamanho da imagem de fundo. O código final ficou assim:

	#nav-menu ul
	{
	list-style: none;
	}
	#nav-menu li
	{
	margin-right: 12px; /* espaço para o próximo item à direta */
	display: inline;
	background: url('../img/triangulo.png') center left no-repeat;
	padding-left: 12px; /* largura da imagem + offset */
	}

view raw with_bkg_image.css hosted with ❤ by GitHub

Atualização: coloquei os códigos nos meus Gists do Github para colocar aqui. Temos destaque de sintaxe, agora!