Menu estilo cardápio com CSS

Vocês se lembram daqueles cardápios com a lista de pratos servidos
nos restaurantes, ou até mesmo aqueles encartes que as pizzarias
distribuem com a listagem de pizzas? Geralmente as
informações contidas são nome do prato, valor e lista de ingredientes.
Já pensaram em fazer isso com CSS? O site Web-graphics disponibiliza um
tutorial
ensinando a fazer um menu estilo cardápio de uma forma bem simples.
Esse mesmo efeito pode ser aplicado à criação de um prefácio para
livros, pois a lógica é a mesma para ambos.

Se você tem interesse em aprender a desenvolver um menu desse tipo,
vamos utilizar listas de definição para o desenvolvimento do menu.
Observe abaixo a marcação HTML:

<dl><br />    	<dt>Nome do prato</dt><br />        <dd class="price">Valor</dd><br />        <dd class="ingredients">Descrição dos ingredientes</dd><br /></dl>

Para cada listagem de prato, vamos utilizar de uma lista de definição
com uma tag dt que conterá o nome do prato, uma tag dd com uma classe
que foi definida como “price” para conter o valor do prato e uma outra tag dd com uma classe “ingredients” que conterá a descrição dos ingredientes. Utilize quantas tags dt e dd forem precisos para inserir pratos na lista.

Com a marcação HTML pronta, vamos partir para o CSS:

dl {background: url(dot.gif) repeat-x 0 1.6em; margin:0 0 1em; overflow:auto; width:100%}<br />dt, dd.price{background-color:#fff; font-size:1.8em; font-weight:bold}<br />dt {color:#F70000; float:left; padding-right:3px}<br />dd {margin:0}<br />dd.price{color:#aaa; float:right; padding-left:3px}<br />dd.ingredients{color:#555; font:italic 1.2em Georgia,Times,sans-serif; float:left; padding:3px 0; width:100%}

Alguns pontos-chave para que funcione corretamente:

• Na tag dl foi utilizado overflow:auto somente para “limpar o float”, experimente removê-lo para ver o que acontece.
• Na tag dd com a classe ingredients é utilizado width:100%, pois ele
  simula um clear:both. A diferença é que ali a tag ocupa todo o espaço
  disponível, evitando problemas.

HTML e CSS ok, vamos ao exemplo de um Menu estilo cardápio com css.
Você pode estilizá-lo como quiser.