Hoy os traigo este menú diseñado por mí, al que he llamado así por los colores que he utilizado.
Cuando pasas el cursor por encima, los colores del fondo y texto se invierten.

/* Menu sol y noche
   diseño, design: Johnny Vega
   REDEANDO - http://redeando.blogspot.com/
----------------------------------------------- */
 .redeando1 {
 float: left;
 width: 100%;
 margin: 0;
 padding: 0;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg98L1CWTdu_nsf_exJTD1uhf_nUwbsDwLbSrNYFt500rSS1pSH2Qh4pmwLEjdZogusv27nsl8lTBbqvktQAzuyEyDtMRcwi2mkC_AdzKAlXkDrO5q-pxg_IUVtQLWhsFZK5J_XcUGxxVEl/s1600/buttonmenu.png);
 font-size: 12px;
 text-decoration: bold;

 }

 .redeando1 li {display: inline;}

 .redeando1 li a, .menujohnny li a:visited {
 float: left;
 padding: 10px;
 text-decoration: none;


 color: #000;
 font-size: 12px;
 font-family: Arial Black;
 border-right: 3px solid #131313;
 border-top: 2px solid #131313;
 border-bottom: 2px solid #131313;
 text-shadow: 5px 1px 5px #fff;


 }

 .redeando1 li a:hover {
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyi3pDFZURl2lzQvwZJ7HWS4ZFveOP3Meqh9vUJwlhuulxIxZVk-F35Y5DPfSyTKMktHpnkz1QzmWcuC83eyhPNJ2cMJXLIq8UQvGCYrf_9onZLXQqVCLCTDrE0nPhb-yUvfW0ZZbSi4VW/s1600/buttonover.png) center center repeat-x;
 font-size: 12px;
 text-decoration: bold;
 color: #FFF545;

 } 

<ul class="redeando1">
 <b>

 <li><a href="URL">NOMBRE</a></li>
 <li><a href="URL">NOMBRE</a></li>
 <li><a href="URL">NOMBRE</a></li>
 <li><a href="URL">NOMBRE</a></li>

 </b>

 </ul>

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 200px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 200px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 200px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #aaa;
display: block;
width: 200px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 125px;
}
</style>
<nav>
<div class="menu-item alpha">
<h4><a href="http://www.amorsevillista.com/">Inicio</a></h4>
<p>Pequeña descripción ....</p>
</div>
<div class="menu-item">
<h4>Sevilla F.C.</h4>
<ul>
<li><a href="#">Plantilla</a></li>
<li><a href="#">Clasificación</a></li>
<li><a href="#">Resultados</a></li>
<li><a href="#">Calendario</a></li>
</ul>
</div>
<div class="menu-item">
<h4>Sevilla Atltco.</h4>
<ul>
<li><a href="#">Plantilla</a></li>
<li><a href="#">Clasificación</a></li>
<li><a href="#">Resultados</a></li>
<li><a href="#">Calendario</a></li>
</ul>
</div>
<div class="menu-item">
<h4>S.F.C. Medios</h4>
<ul>
<li><a href="#">T.V.</a></li>
<li><a href="#">Radio</a></li>
</ul>
</div>
<div class="menu-item">
<h4>!Síguenos!</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google +</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>
<div class="menu-item">
<h4>Contacto</h4>
<ul>
<li><a href="#">Email</a></li>
</ul>
</div>
</nav>

<style>
    body, ul, li {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:18px;
    text-align:left;
    }
    #menu {
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:33px;
    padding:0px 20px 0px 20px;
    /* Rounded Corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* Background color and gradients */
    background: #A60202;
    background: -moz-linear-gradient(top, #D10303, #840000);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D10303), to(#840000));
    /* Borders */
    border: 1px solid #002232;
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
    }
    #menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
    }
    #menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;
    /* Background color and gradients */
    background: #fff;
    background: -moz-linear-gradient(top, #fff, #fff);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fff));
    /* Rounded corners */
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    }
    #menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #fff;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
    }
    #menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #ffffff;
    }
    #menu li .drop {
    padding-right:21px;
    background:url("http://i40.servimg.com/u/f40/13/20/23/83/drop11.png") no-repeat right 8px;
    }
    #menu li:hover .drop {
    background:url("http://i40.servimg.com/u/f40/13/20/23/83/drop11.png") no-repeat right 7px;
    }
    .dropdown_1column,
    .dropdown_2columns,
    .dropdown_3columns,
    .dropdown_4columns,
    .dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;
    /* Gradient background */
    background:#fff;
    background: -moz-linear-gradient(top, #fff, #fff);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fff));
    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    }
    .dropdown_1column {width: 140px;}
    .dropdown_2columns {width: 280px;}
    .dropdown_3columns {width: 420px;}
    .dropdown_4columns {width: 560px;}
    .dropdown_5columns {width: 700px;}
    #menu li:hover .dropdown_1column,
    #menu li:hover .dropdown_2columns,
    #menu li:hover .dropdown_3columns,
    #menu li:hover .dropdown_4columns,
    #menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
    }
    .col_1,
    .col_2,
    .col_3,
    .col_4,
    .col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    }
    .col_1 {width:130px;}
    .col_2 {width:270px;}
    .col_3 {width:410px;}
    .col_4 {width:550px;}
    .col_5 {width:690px;}
    #menu .menu_right {
    float:right;
    margin-right:0px;
    }
    #menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
    }
    #menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
    }
    #menu p, #menu h2, #menu h3, #menu ul li {
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
    }
    #menu h2 {
    font-size:21px;
    font-weight:400;
    color:#000;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #000;
    }
    #menu h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
    }
    #menu p {
    line-height:18px;
    margin:0 0 10px 0;
    }
    #menu li:hover div a {
    font-size:12px;
    color:#B10E02;
    }
    #menu li:hover div a:hover {
    color:#000;
    }
    .strong {
    font-weight:bold;
    }
    .italic {
    font-style:italic;
    }
    .imgshadow { /* Better style on light background */
    background:#FFFFFF;
    padding:4px;
    border:1px solid #777777;
    margin-top:5px;
    -moz-box-shadow:0px 0px 5px #666666;
    -webkit-box-shadow:0px 0px 5px #666666;
    box-shadow:0px 0px 5px #666666;
    }
    .img_left { /* Image sticks to the left */
    width:auto;
    float:left;
    margin:5px 15px 5px 5px;
    }
    #menu li .black_box {
    background-color:#000;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    padding:4px 6px 4px 6px;
    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* Shadow */
    -webkit-box-shadow:inset 0 0 3px #000000;
    -moz-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
    }
    #menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
    }
    #menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
    }
    #menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
    }
    #menu li .greybox li {
    background:#fff;
    border:1px solid #bbbbbb;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width:116px;
    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    }
    #menu li .greybox li:hover {
    background:#ffffff;
    border:1px solid #aaaaaa;
    padding:4px 6px 4px 6px;
    margin:0px 0px 4px 0px;
    }
    #searchthis {
    float:right;
    }
    #search-btn {
    background:#ffffff;
    width:60px;
    float:center;
    margin-top:5px;
    }
    #search-box {
    width:180px;
    float:center;
    margin-top:5px;
    }
    </style>
    <ul id="menu">
    <li><a href="http://www.amorsevillista.com/" class="drop">INICIO</a><!-- Begin Home Item -->
    <div class="dropdown_2columns"><!-- Begin 2 columns container -->
    <div class="col_2">
    <h2>Bienvenidos !</h2>
    </div>
    <div class="col_2">
    <img src="https://lh4.googleusercontent.com/-e4im_YFGbrI/AAAAAAAAAAI/AAAAAAAAAEo/Gy1gc7w34Rk/s102-c-k/photo.jpg" width="50" height="50" class="img_left imgshadow" alt="" />
    <p>Amor Sevillista, es un blog con temática sobre el Sevilla FC, con trucos y tutoriales para Blogger.</p>
    </div>
    <div class="col_2">
    <p><a class='barraMenu' href='http://www.sevillistasporelmundo.com/h69-sigueamor' onclick='window.open(this.href, this.target, &apos;width=1100,height=700,top=0px,left=100px&apos;); return false;'><h2>SÍGUENOS en las Redes Sociales</h2></a></p>
    </div>
    </div><!-- End 2 columns container -->
    </li><!-- End Home Item -->
    <li><a href="#" class="drop">Sevilla FC</a><!-- Begin 4 columns Item -->
    <div class="dropdown_4columns"><!-- Begin 4 columns container -->
    <div class="col_4">
    <h2>Equipos</h2>
    </div>
    <div class="col_1">
    <h3>S.F.C.</h3>
    <ul>
    <ul class="greybox">
    <li><a href='http://www.amorsevillista.com/2010/02/plantilla-sfc_24.html' >Plantilla</a></li>
    <li><a class='barraMenu' href='http://www.sevillistasporelmundo.com/clasificacionprimeradivision-h31.htm' onclick='window.open(this.href, this.target, &apos;width=280,height=580,top=20px,left=100px&apos;); return false;'>Clasificación</a></li>
    <li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/resultadosprimeradivision-h29.htm' onclick='window.open(this.href, this.target, &apos;width=270,height=300,top=20px,left=100px&apos;); return false;'>Resultados</a></li>
    </ul>
    </ul></div>
    <div class="col_1">
    <h3>Atlético</h3>
    <ul>
    <ul class="greybox">
    <li><a href="http://www.amorsevillista.com/2010/01/plantilla-sfc-atletico.html">Plantilla</a></li>
    <li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/clasificacion-2b-h36.htm' onclick='window.open(this.href, this.target, &apos;width=370,height=455,top=20px,left=100px&apos;); return false;'>Clasificación 2ªB</a></li>
    <li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/resultados-2b-h35.htm' onclick='window.open(this.href, this.target, &apos;width=270,height=260,top=20px,left=100px&apos;); return false;'>Resultados </a></li>
    </ul>
    </ul></div>
    <div class="col_1">
    <h3>C-Gº10</h3>
    <ul>
    <ul class="greybox">
    <li><a href="http://www.amorsevillista.com/p/sevilla-c.html">Plantilla</a></li>
    <li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/clasificacion-3-grupo-10-h38.htm' onclick='window.open(this.href, this.target, &apos;width=280,height=455,top=20px,left=100px&apos;); return false;'>Clasificación</a></li>
    <li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/resultados-3-grupo-10-h37.htm' onclick='window.open(this.href, this.target, &apos;width=270,height=260,top=20px,left=100px&apos;); return false;'>Resultados</a></li>
    </ul>
    </ul></div>
    <div class="col_1">
    <h3>Femenino</h3>
    <ul>
    <ul class="greybox">
    <li><a href="http://www.amorsevillista.com/p/sevilla-femino.html">Plantilla</a></li>
    <li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/h33-clasificacion-femino' onclick='window.open(this.href, this.target, &apos;width=520,height=430,top=20px,left=100px&apos;); return false;'>Clasificación</a> </li>
    </ul>
    </ul></div>
    </div><!-- End 4 columns container -->
    </li><!-- End 4 columns Item -->
    <li><a href="#" class="drop">Secciones</a>
    <div class="dropdown_1column align_right">
    <div class="col_1">
    <ul class="greybox">
    <li><a href="http://www.amorsevillista.com/2010/05/indice-de-entradas.html">Indice de Entradas</a></li>
    <li><a href="http://www.amorsevillista.com/2010/12/tabla-de-colores.html">Tabla de Colores</a></li>
    <li><a href="http://www.amorsevillista.com/p/pruebas-en-html.html">Pruebas en HTML</a></li>
    <li><a href="http://www.amorsevillista.com/p/conversor-html.html">Conversor HTML</a></li>
    <li><a href="http://www.amorsevillista.com/2012/03/solicita-tu-cabecera.html">Solicita tu Cabecera</a></li>
    <li><a href="http://www.amorsevillista.com/p/escribe-para-as.html">Escribe para A.S.</a></li>
    </ul>
    </div>
    </div>
    </li>
    <li><a href="#" class="drop">Trucos Blogger</a><!-- Begin 3 columns Item -->
    <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
    <div class="col_3">
    <h2>Lista de Trucos</h2>
    </div>
    <div class="col_1">
    <ul class="greybox">
    <li><a href="http://www.amorsevillista.com/search/label/gadget">Gadget</a></li>
    <li><a href="http://www.amorsevillista.com/search/label/menu">Menú</a></li>
    <li><a href="http://www.amorsevillista.com/search/label/formulario">Formularios</a></li>
    </ul>
    </div>
    <div class="col_1">
    <ul class="greybox">
    <li><a href="http://www.amorsevillista.com/search/label/twitter">Twitter</a></li>
    <li><a href="http://www.amorsevillista.com/search/label/facebook">Facebook</a></li>
    <li><a href="http://www.amorsevillista.com/search/label/slider">Slider</a></li>
    </ul>
    </div>
    <div class="col_1">
    <ul class="greybox">
    <li><a href="http://www.amorsevillista.com/search/label/entradas">Entradas</a></li>
    <li><a href="http://www.amorsevillista.com/search/label/fondos">Fondos</a></li>
    <li><a href="http://www.amorsevillista.com/search/label/iconos">Iconos</a></li>
    </ul>
    </div>
    <div class="col_3">
    <h2>Algunos ejemplos de Trucos</h2>
    </div>
    <div class="col_3">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_FVQ6raW38AoH07MC0iAMqj8QifVCh3dK6gU6eQabmFaK6UetF9WrQFhUQv-HKOdo-YQETFiZ1iFspVAGWGGVXsUd54c6ymGG8LR2GOCCyvgve90oVy_SVMooAIJt3v1pEdDXgvvZ3f6/s1600/Sin+t%25C3%25ADtulo-1.gif" width="70" height="70" class="img_left imgshadow" alt="" />
    <p>Al igual que el año pasado de nuevo os traigo el gadget donde vamos a mostrar las Web Oficiales de los distintos equipos de la Primera División. <a href="http://www.amorsevillista.com/2012/06/gadget-de-equipos-de-la-liga-bbva.html">Leer más...</a></p>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-6Gk_ajk5HynI8imZC-l3mlsK3bHpSTm5iGO-IOpxL4en8eR2wjvqYUDR5WApGbSINPvmTOu6J7ACz1FgJBBDK-aqlTT4nMyRe-Rl4SJqsBQ7zYDuzcbHA1RQiIhCbzTZzM8enxE6027/s1600/MENU.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
    <p>Normalmente todos los Blog usamos un menú de navegación en la parte superior del blog que ayuda a los lectores a navegar y organizar facilmente nuestros enlaces. <a href="http://www.amorsevillista.com/2012/07/menu-horizontal-solo-con-css.html">Leer más...</a></p>
    </div>
    </div><!-- End 3 columns container -->
    </li><!-- End 3 columns Item -->
    <li><a href="#" class="drop">Multimedia</a>
    <div class="dropdown_1column align_right">
    <div class="col_1">
    <ul class="greybox">
    <li><a href="http://www.amorsevillista.com/p/descargas-del-sevilla-fc_11.html">Descargas</a></li>
    <li><a href="http://www.amorsevillista.com/p/videos-del-sevilla-fc.html">Videos</a></li>
    <li><a href="http://www.amorsevillista.com/p/sonidos-sevillistas.html">Audio</a></li>
    <li><a href="http://www.amorsevillista.com/p/fondos-blogger-del-sevilla-fc.html">Fondos S.F.C. Blogger</a></li>
    <li><a href="http://www.amorsevillista.com/p/giffaviconcursor-del-sevilla-fc.html">Gifs,Favicón</a></li>
    <li><a href="http://www.amorsevillista.com/p/trivial-sevillista.html">Juegos</a></li>
    </ul>
    </div>
    </div>
    </li>
    <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/> <input id='search-btn' type='submit' value='Buscar'/></form>
    </ul>

El menú es gratuito, basado en la interfaz de hojas de estilo Bootstrap, inspirado en el diseño Material Design de Google, el cual dispone de unas hojas de estilo CSS realmente sorprendentes.

A continuación puede ver su demostración en el siguiente blog

Demo Clic aquí

Nota importante:

Se recomienda antes de realizar cualquier cambio en su plantilla, efectuar una copia de seguridad de su blog o a su vez crear un nuevo blog para realizar el tutorial blogger.com no se hace responsable si no ejecuto claramente el código tal como se lo indica en este tutorial.


Políticas de uso:





1 Realice una copia de seguridad de su blog o cree un nuevo blog de ejemplos para ejecutar el código de forma segura

2 Dependiendo de la plantilla que esté utilizando se puede ejecutar el código en un widget HTML/Javascript, si en caso que no se despliegue el menú correctamente, deberá ingresarlo en el HTML de su plantilla, para ello les voy a mostrar dos formas seguras de ejecutar el código.

Pasos para ejecutar el menú desde un widget HTML/javascript


Primer paso


 Un clic en “Plantilla”



 Un clic en “Editar HTML”



Ahora se le abrirá el Editor HTML de su plantilla




En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.


4 Busque el siguiente Código

<head>

Justo abajo del código que encontró, ingrese los siguientes estilos

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' rel='stylesheet'/>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'/>
<link href='https://cdn.rawgit.com/grupodelecluse/mega-menu-blogger/00925010/menu-responsive-navbar.css' rel='stylesheet'/>

<nav class='navbar navbar-success navbar-fixed-top' role='navigation'>
<div class='container-fluid'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand'>Ayudadeblogger</a>
</div>

<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='/'>Inicio</a></li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 2<b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 3 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 4 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 5<b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li><a href='#'>Contactos</a></li>
                               </ul>
                </div>
                </div>
</nav>

Video Tutorial: 

Primer paso

1 Un clic en “Plantilla”



2 Un clic en “Editar HTML”



Ahora se le abrirá el Editor HTML de su plantilla



En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.



3 Busque el siguiente código

<head>

Ingrese los siguientes estilos justo abajo del código que encontró




Realice estos cambios:

Cambie las palabras que están marcadas de color rojo por las que usted necesite mostrar

Cambie el símbolo numeral # que está marcado de color azul, por las direcciones URLs de las entradas que necesite mostrar

Eso es todo, un clic en Guardar plantilla