Een menu kaart (spreek: restaurant) stylen.

HTML

<h2>Rates</h2>
<ul class="menu">
	<li>
		<strong>WordPress Coding</strong>
		<em>100<sup>95</sup></em>
	</li>
	<li>
		<strong>CSS Design</strong>
		<em>250<sup>95</sup></em>
	</li>
	<li>
		<strong>Support IE6 (extra)</strong>
		<em>500<sup>95</sup></em>
	</li>
</ul>
<h2>Services</h2>
<ul class="menu style2">
	<li>
		<strong>PhotoShop</strong>
		<em>50<sup>00</sup></em>
	</li>
	<li>
		<strong>Illustrator</strong>
		<em>75<sup>00</sup></em>
	</li>
	<li>
		<strong>Flash</strong>
		<em>60<sup>00</sup></em>
	</li>
</ul>
<h2>Sushi</h2>
<ul class="menu style3">
	<li>
		<strong>Spicy Hand Roll</strong>
		<em>29<sup>99</sup></em>
	</li>
	<li>
		<strong>Salmon Roll</strong>
		<em>20<sup>95</sup></em>
	</li>
	<li>
		<strong>Fire Dragon</strong>
		<em>69<sup>95</sup></em>
	</li>
</ul>
<h2>Sashimi</h2>
<ul class="menu style4">
	<li>
		<strong>Tuna</strong>
		<em>2<sup>00</sup></em>
	</li>
	<li>
		<strong>Salmon</strong>
		<em>3<sup>50</sup></em>
	</li>
	<li>
		<strong>White Fish</strong>
		<em>4<sup>60</sup></em>
	</li>
</ul>

CSS

body {
background: #fff;
font: 80%/160% Arial, Helvetica, sans-serif;
padding: 0;
margin: 20px 40px;
}
a {
color: #999;
}
h2 {
font: bold 320%/100% Georgia, "Times New Roman", Times, serif;
margin: 0;
padding: 0;
}
.menu {
width: 500px;
list-style: none;
margin: 0 0 2em;
padding: 0;
font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
}
.menu strong {
background: #fff;
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -0.3em;
left: 0;
}
.menu em {
background: #fff;
padding: 0 0 0 5px;
font: 110%/100% Georgia, "Times New Roman", Times, serif;
position: absolute;
bottom: -.2em;
right: 0;
}
.menu sup {
font-size: 60%;
color: #666;
margin-left: 3px;
}
.style2 li {
border-bottom: dashed 1px #000;
}
.style3 li {
background: url(images/sub.gif) repeat-x left bottom;
border: none;
}
.style4 li {
padding: 0 0 2.3em 0;
border-bottom: dotted 2px #999;
}
.credits {
color: #999;
font: 100% Georgia, "Times New Roman", Times, serif;
}