Menu "Comic"

Hace un tiempo, vi por una web un menu que me llamo la atencion. Ahora, basado en aquel menu, he diseñado este tan divertido y a la vez visualmente muy estetico. Ahora solo nos queda implementarlo en nuestro blog o web.

Lo primero de todo es poner los estilos (los podeis añadir aparte o conjuntamente con el HTML)

estilos CSS

<style> #menucomic, ul#menucomic li {     float: left; } ul#menucomic li {     background-repeat: no-repeat;     list-style-type: none;     margin-right: 5px;     overflow: hidden; } ul#menucomic li a {     color: #FF7700 !important;     display: block;     font-family: "Lucida Grande",Arial,Helvetica,sans-serif;     font-size: 18px;     font-style: normal;     font-weight: normal;     height: 40px;     overflow: hidden;     padding-bottom: 20px;     padding-top: 20px;     text-align: center;     text-decoration: none;     text-shadow: 0 2px 2px #000000;     text-transform: uppercase;     width: 110px; } ul#menucomic li a:hover {     background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4ZhWSHznw_vGb2VdiWuu6WVI9ETvTPcJag-OVo029M0DTorLWuNZ51ntMn_vWRkXUDkZr5xjep0kzCKPOZo9tOQ_3g_zzOkBd1nb0aGBhCYemoLsYCMUOmbuolR4syKEX94_m6rDgRcl/s1600/hovercomic.png");     background-position: center top;     background-repeat: no-repeat;     color: #FFFFFF !important;     font-style: normal;     font-weight: normal;     overflow: visible; } ul#menucomic li a:active {     position: relative;     top: 2px; } ul#menucomic li#active a {     background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjSkLb8QC0hk7gFdSQpbvsHz3bkK0RDcu-y-hF-0l79q2Gbq1FtCeAV3BF3YItEdkEOaePudlkiVSd2oN6vXNpgTeCUQiWsIm05YZ0VG2p4MXi9frFVy8kDyqTZXSyJ-9GhvYEXi9iMcx3/s1600/activecomic.png");     background-position: center top;     background-repeat: no-repeat;     color: #FFFFFF !important; } </style>

Ahora colocaremos el HTML donde queramos que aparezca el menu, cambiando lo que esta en rojo. Si queremos añadir mas enlaces al menu, añadimos la linea <li> <a href="URL">Texto</a></li> tantas veces como queramos

<ul id="menucomic">
            <li id="active"> <a href="URL">Inicio</a></li>
            <li> <a href="URL">Texto</a></li>
            <li> <a href="URL">Texto</a></li>
            <li> <a href="URL">Texto</a></li>
</ul>

Y el resultado final sera asi: