Menu horizontal de pestañas

Una pregunta muy recurrente es cómo crear un menú horizontal en Blogger. Si bien hay varios tipos de menú que podemos emplear este me parece muy sencillo de instalar y muy vistoso pues da un efecto de resaltado al pasar el mouse sobre el menú.

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVAXydJpXt6scJvqkPFmjCWNv4nbRsKgNlLqHP1eCLW8AQ0Kif9dZXfT3lMbkL4OYxPWxpcHzbrX2o2lgtA0feZfuYF9SWjPZEB4jQs5QQEO_0lDc709l4mayReXQ1H1YSZKzuuErpRBQ/) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFFGy948b1YH6ONbCT0tHlHsWfWINU8y3z1k7aqGnjklC3zATqnUsPcUZ6CyNCvIxvJ5xuXiuAYZhaWl7jJ5gzeSXivQ07hf1_XUggRHotIplu9wPqZqJPI0NymFllysyv-pScOaU51UkA/) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}

<div id='menu'>
<ul>
<li><a href='URL del enlace'><span>Título 1</span></a></li>
<li><a href='URL del enlace'><span>Título 2</span></a></li>
<li><a href='URL del enlace'><span>Título 3</span></a></li>
<li><a href='URL del enlace'><span>Título 4</span></a></li>
</ul>
</div>