Un menu sencillo

Este menu gris efecto 'tab' es simple, pero a la vez efectivo y elegante. Si quieres ponerlo en tu sitio, coloca este codigo en la parte CSS de tu web. En Blogger, seria en la plantilla HTML antes de ]]></b:skin>


#menu {padding:0; margin:0; list-style:none;}<br /> #menu li {float:left; margin-left:1px; padding-top:2px;}<br /> #menu li a {display:block; height:38px; line-height:38px; padding:0 20px 0 0; float:left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFy-F7NK5qcsMEMZXmUpYyZW3TzvmZSjQZlHBQuxo1aG9PRQXDYQ037R1y_j6J6dWZxkGRzWPfwCn04lLk9V0BHgo7uVt5Z3PAsWbHSJcHadNbFgkK_QsEgQgkOmuekYozMf8ch3DXQ4v/s1600/tab_a.gif) no-repeat right top; color:#000; text-decoration:none;}<br /> #menu li a b {display:block; height:38px; float:left; padding:0 0 0 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-94mV1J-HPx4uh0H179hzyJRNGjVlff-EEK8zms-0KCcg6rXChW3f_PRpPpPF_teI1pLhT-xj5Es9GQawnFuqQ8ObyMpOP9x182BRWV4l18UsGTYtAm8xwqHC4AX9WYmZmUJHzjOOZUu/s1600/tab_b.gif) left top; cursor:pointer;}<br /> #menu li a:hover, <br /> .home #menu li#home a,<br /> .single #menu li#single a,<br /> .dropdown #menu li#dropdown a,<br /> .dropline #menu li#dropline a,<br /> .flyout #menu li#flyout a,<br /> .support #menu li#support a,<br /> .contact #menu li#contact a<br /> {background-position:right -51px; margin-top:-2px; height:40px;}<br /> #menu li a:hover b,<br /> .home #menu li#home a b,<br /> .single #menu li#single a b,<br /> .dropdown #menu li#dropdown a b,<br /> .dropline #menu li#dropline a b,<br /> .flyout #menu li#flyout a b,<br /> .support #menu li#support a b,<br /> .contact #menu li#contact a b<br /> {background-position:left -51px; height:40px;}

Y ahora editamos un gadget HTML, lo ponemos donde queramos ubicarlo y en su interior añadimos:


<div id="menuContainer"><ul id="menu"><li class="first" id="Home"><a href="URL"><b>NOMBRE ENLACE</b></a></li> <li id="single"><a href="URL"><b>NOMBRE ENLACE</b></a></li> <li id="dropdown"><a href="URL"><b>NOMBRE ENLACE</b></a></li> <li id="dropline"><a href="URL"><b>NOMBRE ENLACE</b></a></li> <li id="flyout"><a href="URL"><b>NOMBRE ENLACE</b></a></li> </ul></div>

Ejemplo de como quedara