Menú vertical con subpestañas hecho sólo con CSS

11 de junio de 2011 176 comentarios ,
Este es un menú vertical con subpestañas hecho sólo con CSS, no tiene nada de Javascript o de alguna librería, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace.


Colocarlo es bastante sencillo, sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega los estilos siguientes:
/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top: -1px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}
Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:
<div id="menuvertical">
<ul>

<li class="nivel1 primera"><a href="#" class="nivel1">Pestaña 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 1.1</a></li>
<li><a href="URL del enlace">Pestaña 1.2</a></li>
</ul>
</li>


<li class="nivel1"><a href="#" class="nivel1">Pestaña 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>


<li class="nivel1"><a href="#" class="nivel1">Pestaña 3</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>


<li class="nivel1"><a href="#" class="nivel1">Pestaña 4</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>


<li class="nivel1"><a href="#" class="nivel1">Pestaña 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
</ul>
</li>

</ul>
</div>
Agrega la URL de los enlaces donde se indica y listo. Si quieres agregar otra pestaña SIN subpestañas entonces añade antes de </ul> una línea como esta:
<li class="nivel1"><a href="URL del enlace" class="nivel1">Pestaña 6</a></li>
Si quieres agregar una pestaña CON subpestañas entonces añade igual antes de </ul> lo siguiente:
<li class="nivel1"><a href="#" class="nivel1">Pestaña 6</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 6.1</a></li>
<li><a href="URL del enlace">Pestaña 6.2</a></li>
<li><a href="URL del enlace">Pestaña 6.3</a></li>
<li><a href="URL del enlace">Pestaña 6.4</a></li>
</ul>
</li>
No es un menú fuera de lo normal pero sí es bastante útil para organizar los enlaces del blog.



176 comentarios en:

" Menú vertical con subpestañas hecho sólo con CSS "

  1. Hola gracias x el aporT
    salu2 y q stes muy bien ^^

    ResponderEliminar
  2. Holaaa!!! Buenisimooo!!! graciasssss Potro ,como siempre espectacular!! un beso :D

    ResponderEliminar
  3. Hola Potro xD, yo de nuevo pues he publicado 2 nuevas entradas despues de la paginacion que ise, y no aparecen en google, cres que la paginacion haiga hecho que todas las entradas que haga nuevas ya no aparescan en google? :/

    ResponderEliminar
  4. Lady Pink, gracias a ti por tu visita!

    Generofem, sencillo pero funcional ¿no? Otro beso para ti.

    TutoGeek, no tiene que ver en lo absoluto. Tienes que darle un poco de tiempo a los robots de Google para que pasen a tu blog e indexen el contenido nuevo.

    ResponderEliminar
  5. Gracias por tu respuesta rápida, ya estaba llorando x'D

    :alabenapotro:
    :potrorey:

    ResponderEliminar
  6. Buenísimo!
    Potro, más problemas, blogger en argentina esta funcionando mal desde hace un par de minutos, edito los gadgets y doy clic en guardar y no anda. Te comunico por si alguien te pregunta. Otra ayudita, no se bien su nombre pero te explico, sabes como pongo una palabra en una entrada, por ejemplo: MAS AYUDA, y crearle un link ejemplo http://ciudadblogger.com/2011/06/menu-vertical-con-subpestanas-hecho.html#masayuda y que vaya justo ahí a MAS AYUDA ni bien cliqueas el link? Igual que el de los comentarios, de ese estilo.

    ResponderEliminar
  7. jajaja Listo ya lo pude hacer mirando el código fuente de una página que lo tiene xD
    Bueno eso solo blogger no anda muy bien en ARG
    Saludos compañero!

    ResponderEliminar
  8. oie potro hablando de entradas...desde hace un par de dias mis visitas bajaron muy extremo..:/ se me iso muy raro porq llevava un promedio de minimo 120 visitas diarias pero derrepente amaneci yo muy contento entro a blogger y tan taaaan ya casi terminaba el dia y nisiquiera habia revasado las 50 visitas..:/ que cres que pueda ser.? estoi bastante preocupado..:S quiero llorar..jeje bueno no...pro ayudam no... www.tumultitec.blogspot.com

    ResponderEliminar
  9. Pozo+10™, de cualquier forma te dejo el enlace con la información que buscabas ;)
    Cómo crear vínculos dentro de la misma entrada

    TuMultitec, no lo sé, que las visitas suben y bajen es normal, a todos nos sucede, sobre todo cuando es temporada de vacaciones, días de descanso, fines de semana, etc.

    ResponderEliminar
  10. Potro Me pasarias tu correo? xD
    personal no gmail ni nada de esas cosas(:
    el_porta_Valenciana@hotmail.com

    ResponderEliminar
  11. Grande Potro! Así es como lo hice... Muchísimas gracias!

    ResponderEliminar
  12. Buenos dias Potro.

    Se podria poner fjo , "usease" flotante en el lado derecho ( tambien me vale en el izquierdo) o deslizante como el Menú vertical desplegable , que hicistes en dias pasados.

    Es que me gusta mas este que el anterior.(bastante mas )
    Muy agradecido de antemano , Recibe un saludo
    Victorino Redondo

    ResponderEliminar
  13. hola amigo tu pagina es una de las mejores, y estuve buscando un slider similar al que sale en esta pagina http://cr.tuhistory.com//home.html sera que me puedes ayudar para hacer algo similar a ese slider que esta muy bonito para mostrar videos y fotos en un shadowbox. aqui te dejo una imagen para que veas el slide que te digo.
    http://dl.dropbox.com/u/17721279/Shadowbox/Dibujo.JPG

    gracias de antemano.

    ResponderEliminar
  14. TutoGeek, si es por una consulta de algún tema deja la pregunta en la entrada que corresponde, si es por un tema no explicado en el blog entonces usa el formulario de contacto que se encuentra en el menú superior. Saludos!

    MaG@S RaDioMuSiC, gracias a ti por pasar :)

    ResponderEliminar
  15. Buen día VRedondoF,

    El código que iría en el elemento HTML/Javascript ponlo antes de </body>

    Luego debajo de esta línea:
    #menuvertical {

    Agrega lo siguiente:
    right:0;
    top:250px;
    position:fixed;

    Saludos.

    ResponderEliminar
  16. Juvinao, no lo soy pero te agradezco tu comentario :)


    henry Jason, exactamente como ese no lo sé, pero hay un carrusel de imágenes que tiene incorporado un sistema de ventanas modales (ThickBox), aunque no es Shadowbox puedes cambiarlo por ese para que te permita poner videos en las ventanas modales.

    ResponderEliminar
  17. gracias potro pero ese ya lo habia visto antes.

    si algun día haces algo parecido a el que te dije me puedes avisar mi blog es http://www.descargagratis.co.cc/ ahi me puedes dejar un mensaje.

    ResponderEliminar
  18. Hola, una pregunta que no viene en esta Entrada., ¿Como puedo saber la altura y el ancho, de mi cabecera de mi blog?

    ResponderEliminar
  19. Potro, tengo una duda acerca de otro de los menús que pusiste por aquí.
    Mira, lo metí en el blog http://desesperatecats.blogspot.com pero si te fijas los gadgets me medio solapan con el menú, así que querría saber como evitarlo. Y también como quitar ese trozo sobrante de la derecha.

    Muchas gracias de antemano.

    ResponderEliminar
  20. Antonio, depende, en algunas plantillas no tiene especificada la altura sino que se adapta a la imagen que le pongas, eso varía de plantilla en plantilla. ¿En cuál blog quieres saber su medida?

    martinyfelix, si es otro menú entonces deja el comentario en la entrada que corresponde para no dispersarnos del tema de este menú, y pon el blog como público para que pueda ver el problema que tienes. Saludos.

    ResponderEliminar
  21. Esto está espectacular, vengo organizando el blog, así que me guardo esta publicación, cuando tenga listo lo hago, saludos

    ResponderEliminar
  22. GRACIAS AMIGO MUY BUEN TRUCO MUCHAS GRACIAS SI PUEDES TE PASAS POR EL MIO ES DE LA WWE EN VIVO ,ME AYUDAS SI PUEDES http://lawweenvivo-entrar.blogspot.com/ SIGUE ADELANTE AMIGO EN TUS TUTORIALES

    ResponderEliminar
  23. Hola majo y gracias de antemano.
    tengo en mi blog un menu de un estilo como el k dices pero no se porque motivo me sale detras de los videos sin poder verse cuando se habre.No se si me podrias hechar un cable.Gracias .

    ResponderEliminar
  24. Hola Potro, estoy probando este menu en mi blog de pruebas y no consigo que se me vean las subpestañas del menu, se cortan y no se ven, a ver si puedes mirar por que es. Gracias.

    http://ssfpruebas.blogspot.com

    ResponderEliminar
  25. Urko, necesitas hacerle una modificación a los videos para que no se sobrepongan.


    Jesús Gómez, busca esta parte de tu plantilla y elimina lo que está en negrita:
    #sidebar-leftwrap{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;

    ResponderEliminar
  26. Gracias Potro, ya me funciona.

    Otra cuestión, ¿se puede poner un fondo a los botones en vez de que sean de un color sólido? Gracias.

    ResponderEliminar
  27. Hola buenas tardes. Mi plantilla es de 3 columnas pero quiero poner el menú en la columna de la derecha de mi blog, se puede poner que el menú despliegue a la derecha. gracias.

    ResponderEliminar
  28. EN EL MIO QUIERO SABERLO PARA EL LOGO DE MI BLOG, MI BLOG: WWW.PEQUEMUNDOSSIMS.BLOGSPOT.COM

    ResponderEliminar
  29. Hola Jesús Gómez,

    Para ponerle una imagen de fondo sólo cambia donde se indica el color de fondo de las pestañas, o sea, esto:

    background-color: #045FB4;

    Por esto:
    background: url(URL de la imagen);

    Eso lo tienes que hacer en todos los fondos que se indica.

    ResponderEliminar
  30. Hola RELOJES JT,

    Para cambiar la posición en la que se despliegan las subpestañas cambia esto:
    left: 161px;

    Por esto:
    right: 161px;

    ResponderEliminar
  31. Hola Antonio,

    La altura de tu cabecera es de 125px, sin embargo puedes modificarla para hacerla más grande si lo deseas:

    #header-wrapper {
    height:125px;
    margin:0 auto;
    width:960px;
    }

    ResponderEliminar
  32. protro como anda genio, el menu al desplegar me queda abajo del contenido de la entrada, hasta por debajo del texto, realice lo de borrar overflow:hidden; pero se comporta igual

    ResponderEliminar
  33. Potro que pasa con Blogger, en las nuevos escritorios no se puede cambiar el codigo html?? que haremos cuando desaparezcan los antiguos??

    ResponderEliminar
  34. perdon potro aca te dejo mi blog que me olvide de ponerlo en el comentario anterior
    www.moriatisapleno.com.ar
    abrazo

    ResponderEliminar
  35. Hernan, ¿dónde lo has puesto que no lo veo? o.O

    Javier, pues esperemos que no sea una decisión definitiva de Blogger y que permitan la opción de Edición de HTML, o bien, que al menos nos dejen la interfaz antigua de forma indefinida para que podamos usarla quienes queramos hacer uso de esa opción.

    ResponderEliminar
  36. potro ahi lo puse en la columna izquierda.
    abrazo

    ResponderEliminar
  37. si borro overflow:hidden; se ve pero por debajo del contenido de la entrada

    ResponderEliminar
  38. En las plantillas hechas con Aristeer no sé decirte muy bien pues casi no las conozco por lo complicadas que son. Quizá tengas que quitarle el overflow:hidden que está debajo de esta área:
    .art-contentLayout .art-sidebar1, .art-contentLayout .art-sidebar2 {

    Aunque quizá e resultado no sea muy bueno y el menú se esconda detrás del contenido, pero como te digo, de esas plantillas no sé mucho :(

    ResponderEliminar
  39. Oye Potro una pregunta, ya has probado el Cloud Experience?... jeje ya vi en "cyberbloggero"
    Me gusto para probar con los archivos .mp3 para el reproductor que haré. Pero primero quiero tu aprobacion jeje.
    Saludos!!

    ResponderEliminar
  40. Saludos desde Venezuela, en especial a Potro quien ha sido un gran colaborador. Vean mi blog! Esta de lujo!: http://orlandoalvarezitc.blogspot.com / acepto criticas ya que se que todavia le faltan algunos detalles y me gustaria mejorarlos. Potro si hay alguna recomendacion que me puedas hacer sera bien recibida.

    ResponderEliminar
  41. Saludos hermano tengo un detallito a ver si me puedes ayudar, el menu principal de mi blog se retrasa un poco cuando cambio a otra opcion, por ejemplo cuando paso de Servicios a Chat se tarda un poco y eso no se ve nada bien, la plantilla base que use fue "dominate" de btemplates. Habra alguna forma de corregir esto. Mi blog es: Http://orlandoalvarezitc.blogspot.com.

    ResponderEliminar
  42. Saludos Potro, ya logre corregir el problema, lo que hice fue reemplazar el script del menu por el de otra pagina que si funcionaba perfecto y listo!, solucionado el problema. Disculpa tanta molestia. Gracias igualmente por todo tu apoyo.

    ResponderEliminar
  43. javi_anubis, quedé de probarlo pero hasta ahorita no he podido hacerlo, a ver si después con más tiempo lo checo, pero si tú lo pruebas antes ya nos platicarás ;)

    Orlando A., qué bueno que ya lo has resuelto :)

    ResponderEliminar
  44. Hola Potro:
    Porque cada vez que abro mi blog cuando llevo un tiempo sin abrirlo sale una paguina emergente de publicidad. He buscado la direccion de esta y no lo tengo confirudado para ello.
    Un Saludo

    ResponderEliminar
  45. Hola FRANCISCO,

    Es algún gadget de un servicio externo el que ingresa esa publicidad, regularmente se da en los contadores Web. FeedJit es uno de ellos, así que probablemente sea éste el causante de esa publicidad intrusiva.

    Saludos.

    ResponderEliminar
  46. Hola Potro,
    Tengo este blog de pruebas y no me funciona.
    http://lalazooooooooo.blogspot.com/
    porque no sale el menú correcto si ya he hecho todo lo de arriba? Lo quiero corregir primero en ese blog de pruebas para luego pasarlo a mi blog verdadero www.fotohansr.com
    Espero que pueda ayudarme. Le estaría eternamente agradecido. Un saludo

    ResponderEliminar
  47. Hola Fotohans S.R.,

    Lo que sucede es que cuando agregaste los estilos del menú eliminaste la llave de cierre de los stilos que estaba arriba. Lo tienes así:

    .red #slatenav ul li a.current {
    color: #fff;
    background: transparent url(url-de-imagen-HOVER.gif) no-repeat top center;
    /* Menú vertical con subpestañas
    ----------------------------------------------- */
    #menuvertical {
    text-align: center;
    width:100%;
    }

    Y debe ser así:

    .red #slatenav ul li a.current {
    color: #fff;
    background: transparent url(url-de-imagen-HOVER.gif) no-repeat top center;
    }

    /* Menú vertical con subpestañas
    ----------------------------------------------- */
    #menuvertical {
    text-align: center;
    width:100%;
    }

    Como se eliminó esa llave de cierre inhabilita los demás estilos de abajo y es por eso que el menú no funciona, pero corrigiéndolo deberá funcionar sin problemas.
    Saludos.

    ResponderEliminar
  48. Hola Potro;
    Muchas gracias. La verdad que eres un fenómeno. Funcionó perfectamente. Mil gracias un saludo

    ResponderEliminar
  49. Hola de nuevo,
    Siento ser pesado, pero me ha surgido otro problemilla. Ahora no se porque me sale cuando paso el mouse por encima no salen las pestañas al mismo nivel y al lado de la otra sino un poco montada encima de la pestaña y no en la misma linea. Como puedo ponerlo como lo tienes en el ejemplo tuyo? http://lalazooooooooo.blogspot.com/
    Muchas gracias

    ResponderEliminar
  50. Prueba modificando esta parte:

    left: 161px;

    top:-31px;

    El primer puedes ponerle un valor más alto y al otro uno más pequeño, o bien, juega con albos valores hasta que quede a la medida.

    ResponderEliminar
  51. buenos dias potro tengo un inconveniente el menu en fire y chrome se ve bien pero en internet explorer se daña ...colaborame www.facetv.co.cc

    ResponderEliminar
  52. Gracias Potro. Funcionó perfectamente.

    ResponderEliminar
  53. potro ayudame a colocara este menu en mi blogger... aqui te dejo el link: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

    ResponderEliminar
  54. Potro el Menu esta excelente, pero sabes una cosa, tengo un pequeño problema. Cuando lo pongo en el blog, lo puse en la sidebar de la derecha, es el unico que tengo, y queda muy hacia la izquierda, nose como centrarlo. Me ayudas porfavor Potro

    ResponderEliminar
  55. Quizá sea más conveniente que hagas más anchas las pestañas del menú para que se extienda a la derecha. Eso puedes hacerlo en esta parte del menú:
    width: 162px; /* Ancho de las pestañas */

    Con un 234px se verá bien.

    ResponderEliminar
  56. Hola Potro!!!

    Que pasa si el gadget lo pongo arriba, reemplazando al del traductor de Google???

    Ando buscando algo así, porque ya me quedaron demasiadas etiquetas, y no me gusta mucho. Sé que si las agrupo quedará más ordenado.

    http://sueniosypasteles.blogspot.com

    Gracias desde ya!!!

    ResponderEliminar
  57. Hola Smart Girl,

    En realidad lo puedes poner donde sea, siendo un gadget HTML/Javascript lo puedes arrastrar hasta la ubicación que desees.

    ResponderEliminar
  58. Potrooo!!!
    Me podrías ayudar?? Hice este menú, pero creo q le falta una configuración xq no se ve bien, podrías checarlo y ayudarme? PORFAAA!!

    http://blogprueba-investigacion.blogspot.com/

    ResponderEliminar
  59. Hola LiLiS,

    Cuando has puesto el código de los estilos has omitido una diagonal al principio, en esta parte:

    * Menú vertical con subpestañas

    Y debe ser así:

    /* Menú vertical con subpestañas

    Después de eso, cambia el width:100%; por un valor más pequeño, por ejemplo 80%, eso hará que las pestañas sean más reducidas y eso evitará que se encimen con las otras.

    ResponderEliminar
  60. Muchas gracias!! si me quedó bien... bueno, sólo hay un detallito en el sub-índice de "asociaciones y sociedades"... lo puedes checar xfa??
    Saludos!!

    ResponderEliminar
  61. potro subpestaña de una subpestaña no es posible ?
    otra cosa, no encuentro la parte de content wrapper, quiero achicar un poco

    ResponderEliminar
  62. LiLiS, revisa la estructura del código de esa parte, verás que has puesto de más unos UL que no debían ir. Saludos!

    Torneo Morumbi, no queda muy bien pues al pasar el cursor se queda mostrada siempre la subpestaña de la subpestaña ya sea que se quiera ver o no. Quizá con otro menú puedas tener mejores resultados.

    ResponderEliminar
  63. Gracias Potro!!! Aunque creo que me voy a arriesgar por otro menú, aunque tenga que toquetear la plantilla, que es lo que no quiero...

    Un beso y gracias!!!

    ResponderEliminar
  64. Suerte entonces y gracias por el beso :)

    ResponderEliminar
  65. Hola pues mira resulta que estoy haciendo un blog de pruebas y estoy averiguando la cabecera y me acuerdo que me diste esto:
    #header-wrapper {
    height:125px;
    margin:0 auto;
    width:960px;
    }

    y lo he buscado pero no me sale nada.
    te dejo mi blog de prueba: http://plantilladepequemundossims.blogspot.com/

    ResponderEliminar
  66. Hola Antonio,

    En esa plantilla, el contenedor de la cabecera es este:

    #header {
    width: 960px;
    height: 110px;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    margin: 0px auto 0px;
    padding: 0px;
    overflow: hidden;
    }

    ResponderEliminar
  67. Hola de nuevo, he hecho la imagen a igual de la anchura y de la altura y se me come una parte... y no sale la otra.
    Bueno lo puedes mirar en el blog; te lo dejo por si te se ha olvidado...
    http://plantilladepequemundossims.blogspot.com/
    Como puedo solucionar el problema?

    ResponderEliminar
  68. La imagen puede ser que se haya cortado por la otra imagen de publicidad ¿puede ser eso?

    ResponderEliminar
  69. Lo que te di es el contenedor de la cabecera general, pero tú tienes dividida la cabecera en dos. Esa parte la que le corresponde es esta:

    .headerleft {
    width: 350px;
    float: left;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }

    ResponderEliminar
  70. Potro seria así?
    http://2.bp.blogspot.com/-8KyOmV1y5l8/Ti2zODkiiII/AAAAAAAAAYM/d02IMQCZ8gE/s1600/Logo%2Bpara%2Bel%2Bblog.png

    ResponderEliminar
  71. Así es. La cabecera que contiene el logotipo es de 350px

    ResponderEliminar
  72. ¿No se puede hacer un poco mas ancho la imagen?

    ResponderEliminar
  73. Sí, cambia ese width: 350px; por el ancho que quieres, luego, busca esta parte:
    .headerright {
    width: 600px;

    A ese width: 600px; restale lo que le aumentaste al otro.

    ResponderEliminar
  74. Ok ya he solucionado el problema Gracias Potro xDD!

    ResponderEliminar
  75. Muy buenas, felicidades con la pàgina, me a servido muchisimo al crear un blog para una entidad cultural.
    El menu de blogger lo cambie por este, me iva de puta madre hasta que lo abri con el IE , al pasar el mouse por encima, solo se activa el boton encima de la letra, por lo que es imposible abrir las pestañas...
    no se como cambiar eso, y que funcione igual que con mozilla o chrome.
    Me puedes decir algo??
    Gràcias por tu blog, es una joia!!!! XD

    ResponderEliminar
  76. Se me olvido, otra cosa es que sale una linea discontinua encima de cada botón, encima de cada boton, eso no me molesta demasiado, pero si se puede quitar pos mejor…
    Hasta luego!!!!

    ResponderEliminar
  77. Hola Jordi,

    El menú como tal funciona en IE, al menos en la versión 8 que es en la que lo he podido probar funciona sin problemas.
    No mencionas con cuál versión lo has probado ni en cuál blog lo tienes puesto. Pero sin duda debe ser un problema, o de la versión del navegador, o de la plantilla que usas.

    Saludos.

    ResponderEliminar
  78. Uff Primero de todo muchisimas Gracias!!! Tengo el proyecto de blogger mas serio de mi vida jeje y tu me has salvado el pellejo en muchas ocaciónes... Haber si me puedes ayudar.. estaria genial..

    Acabo de poner tu menu... y todo esta correto... lo unico que tengo dos problemas... 1.. que los botones del menu salen muy separados... como 50px una de otra :S.. y no tengo ni idea por donde empesar a mirar donde esta el problema...

    Bueno y segundo que las sub-pestañas me salen cortadas... es normal eso? O hay alguna manera de sacarlas adelante.. para que se puedan ver enteras?

    Bueno compañero! Seguire buscando menus como este... ya que es lo que mas necesito en este momento.. Si puedes ayudarme te estare muy agradecido!! Y te te are un Ancor Text en un Blog que tengo de PR3..

    un Saludo y de nuevo GRACIAS por tu material! Buenisimo!

    (Blog del problema: VerTiendas.com)

    ResponderEliminar
  79. Hola NE,

    Muchas gracias por tu comentario.
    Parece que tiene que ver los estilos de tu plantilla, pero sobre todo que hay espacios que se agregaron cuando colocaste el menú.
    Primero vamos a solucionar lo de los espacios, ya que quede bien, vemos lo demás.
    Primero edita el menú y busca todos los códigos como este:
    <br/>

    Elimínalos todos, eso deberá reducir ese espacio, ya que lo hagas me dices para ver cómo ha quedado ;)

    ¡Saludos!

    ResponderEliminar
  80. Compañero! Mil Gracias!!! Vales ORO!

    Seguramente sea la plantilla... ya que me ha llevado muchos problemas...
    En tu Maravilloso Blog encontre un Menu de imagenes que es perfecto para mi proyecto... lo probe y va realmente genial! Entonces me quedo con ell..

    Dime que ancor text te pongo o banner o lo que sea! Y te lo dejo en blog de PR3 como te prometi! :) sin etiqueta no follow ^^

    Deverias dejar un boton abajo de "dejar propina" de esos de paypal! Ya que mas de uno te dejariamos! ;)

    Espero tu ancor text ;)

    ResponderEliminar
  81. Olvide decirlo... soy usuario "NE"

    ResponderEliminar
  82. Muchas gracias!
    El anchor text que tú quieras :)
    Del botón de PayPal sí hay uno, está al final de la sidebar, pero creo que nadie lo ve :(

    ¡Saludos!

    ResponderEliminar
  83. De anchor text te puesto: Tutoriales blogger
    en el blog: srivas.com.ar

    un Saludo :)! (borra el comentario por que no aporta nada XD)

    ResponderEliminar
  84. Gracias por la respuesta, efectivamente era un tema de la plantilla, por ahora he dejado un menu más simple, a ver si cuando tenga tiempo puedo cambiarla, si lo hiciera ahora me quitaría todas las modificaciones y no tengo el tiempo para hacerlo. Hasta luego

    ResponderEliminar
  85. El Potro... al no encontrar un menu como dios manda.. cogi un menu de web y lo adapte a blogger... es un menu vertical con doble submenu... esta al lado derecho: www.VerTiendas.com

    El caso es que si quieres! Estare encantado para pasartelo por email para que lo postees ! Un Saludo ;)

    ResponderEliminar
  86. Gracias Niko, a ver si después te lo pido. El resultado te ha quedado fabuloso en el blog :)

    ResponderEliminar
  87. Muchisimas Gracias compañero! :D Cuando quieras ;)

    ResponderEliminar
  88. hola potro estoy utilizando este menú pero chrome se ve bien, pero en Internet explorer no, espero me puedas ayudar gracias

    http://imss-ayuda.blogspot.com/p/zona-de-descargas.html
    es aquí donde lo aplique para que lo veas

    ptt. creo que hice este comentario en una entrada equivocada. ofrezco una disculpa

    ResponderEliminar
  89. Ahhhh, qué trabajo es con IE... supongo que el problema es que se generan muchos espacios y al tratar de pasar a la otra pestaña encuentra ese espacio y se cierra el menú.

    Prueba agregar antes de ]]></b:skin> esto:

    .widget .post-body li {
    margin-bottom: 0 !important;
    padding: 0 !important;
    }

    ResponderEliminar
  90. Muchas Gracias potro, espero que hayas disfrutado tus vacaciones, quedo perfecto, lo mismo sucede con este menu:
    http://ciudadblogger.com/2011/04/menu-horizontal-con-subpestanas-hecho.html
    que puedo hacer en este caso??
    y si es un lió IE, pero que se puede hacer.
    gracias nuevamente

    ResponderEliminar
  91. Ese sí te lo voy a deber pues no sé ni por dónde empezar. No sé si sea el mismo caso (no lo parece), o sea una incompatibilidad general :/

    ResponderEliminar
  92. hola potro espero que estes bien. a este menú le podemos agregar sub-subpestañas??

    ResponderEliminar
  93. Hola lerh,

    Se tendría que modificar varios aspectos, pero aquí hay uno de Dynamicdrive que ya los tiene incluidos:
    http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/

    ResponderEliminar
  94. Buenas Potro, ¿Como puedo buscar los códigos de color para modificar colores de las pestañas? Se le podrían agregar imágenes a este menú? y por último... ¿Como puedo colocar las pestañas un poco más a la izquierda? Un saludo!

    ResponderEliminar
  95. Hola AlejandroLopez,

    En el menú de arriba hay un enlace que dice 'Colores', ahí podrás obtener el código de los colores.
    Para cambiar el color por una imagen cambia esto:
    background-color: #045FB4; /* Color de fondo */

    Por esto:
    background: url(URL de la imagen);

    El menú se pega completamente a la izquierda, habría que ver si donde lo has puesto hay una separación o algo y así ver cómo se puede mover.

    Saludos.

    ResponderEliminar
  96. Buenas Potro,
    Te he copiado otro de los menús que tienes en tutoriales, pero me queda muy despegado del margen izquierdo, ¿Cómo podría desplazarlo un poco para cuadrarlo con el espacio?
    Te dejo la URL
    www.israelcornejosanchez.blogspot.com

    ResponderEliminar
  97. Buen día AnticuarioReligioso,

    Deja la pregunta en esa entrada para no desviarnos del tema de este post ;)
    Saludos.

    ResponderEliminar
  98. Buenas Potro, gracias por la respuesta anterior, tengo uan ultima duda, porque el menu me pisa un poco el borde donde se situaran las entradas y necesito desplazarlo un poco a la izquierda, a ver si tuviera solucion!

    www.alejandrolopezaraguez.blogspot.com
    gracias por adelantado!

    ResponderEliminar
  99. hola potro me podrias decir porque mi menu queda asi,ya lo he aplicado en otro blog y queda bien. pero no se que ocurra en este:
    http://limpiezareyher.blogspot.com/
    saludos lerh

    ResponderEliminar
  100. AlejandroLopez, porque el ancho del menú es más grande que el ancho de tu sidebar. Reduce el ancho de las pestañas donde se indica en color verde.
    Si los submenús te quedan muy separados agrega debajo de:
    #menuvertical ul li ul {

    Esto:
    margin-left: -25px;

    ResponderEliminar
  101. lerh, parece que en algunas plantillas se comporta diferente. Agrega debajo de:
    #menuvertical ul li ul li a {

    Esto:
    margin-left: 35px;

    Si te queda un borde salido elimina esta parte:
    #menuvertical ul li.primera {
    border-top: solid 1px white;
    }

    Saludos.

    ResponderEliminar
  102. gracias potro lo intentare salduos lerh!!

    ResponderEliminar
  103. hola potro, perdón por tantas molestias, como quito puedo reducir el espacio que ha entre las pestañas de este menú, en las paginas estáticas de blogger.
    muchas gracias potro

    ResponderEliminar
  104. ¿En cuál página lo has puesto que te genera ese problema?

    ResponderEliminar
  105. http://limpiezareyher.blogspot.com/p/quienes-somos.html
    esta es mi pagina.
    el problema sucede en IE

    ResponderEliminar
  106. El problema es que IE siempre interpreta los espacios de una manera distinta, y si corriges los espacios para ese navegador entonces en los demás se verá mal. Yo no le daría mucha importancia dado que es un pixel extra de separación.

    ResponderEliminar
  107. si mejor asi, gracias potro por la ayuda

    ResponderEliminar
  108. La verdad es que esto está genial, nosotras lo hemos probado, pero nos pasa que dependiendo de qué ordenador accedamos, no podemos acceder a la subpestaña, cuando nos movemos a la drcha para escoger la opcion, la subpestaña desaparece. ¿por qué? ademas es curioso porque no nos pasa desde todos los ordenadores, será una opcion solo funcional con los nuevos ordenadores o programas?

    ResponderEliminar
  109. Hola Nerea,

    El ordenador no tiene que ver con la forma como se muestran las cosas, sino con el navegador que se use y la versión de éste.
    Si es Internet Explorer entonces es posible que haya algunos problemas, como todo lo que se ve en ese navegador.
    Habría que ver en cuál blog y plantilla lo has puesto, así como en qué navegador lo has visto para mirar si es posible arreglarse.

    Saludos.

    ResponderEliminar
  110. Hola, muy buena explicación e ideal para los blogs. No tengo experiencia en el tema, pero se entiende cada paso para realizar las modificaciones. Mi duda está en que yo he creado en blogger páginas independientes con el gadgets que ellos ofrecen ¿éstas páginas se podrían enlazar al menú vertical y eliminarlas de la barra horizontal? ¿se pierde el enlace al realizar este procedimiento?
    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Sandra,
      Por supuesto que puedes enlazar tus páginas no sólo a este menú, sino a cualquier otro.
      Tus páginas no se pierden. El gadget lo puedes eliminar y si después quieres ponerlo de nuevo lo podrás hacer sin problemas, tus páginas no se verán afectadas con eso.
      Para enlazar tus páginas con este u otro menú sólo pon donde dice "URL del enlace" la dirección de tu página.

      Saludos.

      Eliminar
  111. En primer lugar, muchas gracias por los consejos. Hemos utilizado muchos de ellos en los distintos blogs de los centros de información y educación ambiental del Ayuntamiento de Madrid.

    Aunque sean blogs "oficiales", son elaborados por los propios equipos de los centros, y nuestros conocimientos informáticos son básicos, por lo que nos viene muy bien cualquier ayuda para intentar darles un toque de profesionalidad.

    Estamos incorporando estos menus verticales en algunas de las páginas y funcionan muy bien, sin embargo nos preguntabamos si sería posible añadir un subnivel adicional. Hemos hecho varias pruebas con el código, estudiando como se incorpora el subnivel 1, pero algo tenemos que estar haciendo mal porque no conseguimos un código válido.

    Muchas gracias de nuevo por este trabajo desinteresado y de excelente calidad.

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola La Cabaña del Retiro,
      Muchas gracias por tu comentario, es un gusto saber que estén usando estos recursos para armar sus blogs :)

      Con este menú es bastante complicado el asunto, sobre todo porque podría no verse bien en todos los navegadores.
      Lo más recomendable es que entres a http://purecssmenu.com/ ahí tienen un par de menús verticales que sí tienen esa característica. Cuando descargues el menú te aparecerá un documento HTML, abre ese archivo, ahí verás el menú, luego mira el código fuente de esa página.
      Ahí, en el código fuente verás todo el código del menú. Copia todo lo que hay desde:
      <!-- Start PureCSSMenu.com STYLE -->

      Hasta:
      <!-- End PureCSSMenu.com STYLE -->

      Y pégalo antes de </head>

      Luego, en un elemento HTML/Javascript pega todo lo que hay desde:
      <!-- Start PureCSSMenu.com MENU -->

      Hasta:
      <!-- End PureCSSMenu.com MENU -->

      Y con eso tendrás tu menú con esas características que buscas.
      Saludos.

      Eliminar
  112. Buenas,
    Quisiera saber si a este menu se le puede agregar algun decorativo para que cuando uno se posa sobre el mismo aparezco el dibujo, ya sea una imagen chica o algun otra cosa.
    muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Candela &amp; Inés,

      Donde dice:
      background-color: #6E6E6E; /* Color de fondo al pasar el mouse */

      Puedes poner un color de fondo distinto. O si prefieres que sea una imagen entonces cambia eso por esto:
      background: url(URL de la imagen);

      Eliminar
  113. portro, puse el menu en mi blog pero las pestañas desplegadas se ven detras de cualquier objeto, e inmediatamente desaparecen al cruzar el mouse con uno de los otros objetos,
    como hago para corregir el error? mi blog es
    http://violinorquestasinfonicaamadeus.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola john, pon el menú exactamente como está el código de la entrada, porque lo has modificado y eso ha hecho que las subpestañas no se muestren como deberían.
      Saludos.

      Eliminar
  114. Hola Potro,
    tengo este menu instalado en mi blog, pero al usar una subpestaña no me deja que el cursor la pinche, desaparece antes ¿Cual sería el problema?

    www.alejandrolopezaraguez.blogspot.com

    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Alejandro, cambia lo que está en negrita:
      #menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
      display: block;
      position: absolute;
      left: 161px;
      top: -1px;
      }

      Por 149px
      Saludos.

      Eliminar
  115. hola, disculpa tengo un problema con una plantilla que diseñé con artisteer, y es que se sobreponen los gadget y cuando estoy en el editor de paginas se ve así http://i850.photobucket.com/albums/ab67/higaku/c8ba363b.jpg no se si puedes decirme como arreglarlo, tambien hice un menu con ese programa pero a la hora de subir la palntilla en mi blog y visualizarlo ya no se ve, podras ayudarme, saludos

    ResponderEliminar
  116. hola, disculpa tengo un problema con una plantilla que diseñé con artisteer, y es que se sobreponen los gadget y cuando estoy en el editor de paginas se ve así http://i850.photobucket.com/albums/ab67/higaku/c8ba363b.jpg no se si puedes decirme como arreglarlo, tambien hice un menu con ese programa pero a la hora de subir la palntilla en mi blog y visualizarlo ya no se ve, podras ayudarme, saludos

    ResponderEliminar
    Respuestas
    1. Nunca he usado ese programa Luis Angel, pero sí se que esas plantillas dan muchos problemas, sobre todo cuando se quieren personalizar fuera del programa.

      Eliminar
  117. No lo sé, podría ser que no usas la última versión de IE, o hay algo que no es compatible con ese navegador.

    ResponderEliminar
  118. Buenas noches,me gustaría saber como poner las pestañas redondeadas en sus bordes derechos. Gracias por tus ayudas. Muchas Gracias.
    lapicerossinpunta@blogspot.com

    ResponderEliminar
    Respuestas
    1. Buenas noches Darío. Debajo de #menuvertical ul li a { agrega:
      border-radius: 0px 10px 10px 0px;

      Eliminar
  119. Hola Potro, estoy acabando ya la apariencia del blog y, lo primero, me gustaría darte las gracias porque ha sido gracias a tu inestimable ayuda.
    Lo segundo quería preguntar un par de cosillas acerca de este menú.
    1.¿Se puede cambiar la fuente y el tamaño del texto de las pestañas?
    2.¿Se puede redondear los bordes de las pestañas, algo parecido a lo que pudimos hacer en linkwithin?

    Gracias, muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Bastida, para los bordes mira el comentario #124.1
      La fuente la puedes poner debajo de #menuvertical ul li a {
      Por ejemplo:
      font-size:14px;
      font-family:Arial;

      Saludos.

      Eliminar
  120. Hola Potro, acabo de colocar el menu vertical pero necesito q de las subpestañas salgan otras subpestañas... como en el caso del menú horizontal, se puede hacer?

    Salu2

    ResponderEliminar
    Respuestas
    1. Con este menú no Gustavo, es mejor que consigas uno que ya tenga esas características.

      Eliminar
    2. No he visto ningúno... otra cosa, no quiero q salga ninguna entrada en la pagina principal. Eso se hace en "configuracion" pero se puede quitar la frase "no hay entradas". Porque si hay entradas solo q hay que dar a las pestañas para verlas. Cómo se puede hacer eso?

      Eliminar
    3. Con estos pasos se elimina también ese mensaje:
      http://ciudadblogger.com/2009/07/ocultareliminar-el-mensaje-mostrando.html

      Eliminar
  121. Hay alguna manera de hacerlo horizontal?

    ResponderEliminar
    Respuestas
    1. Es mejor si consigues uno que ya sea horizontal, mira la categoría "Menús".

      Eliminar
    2. Ah, gracias! Voy a ver si me sale :)

      Eliminar
  122. Porfavor potro, porque me sale el menu horizontal si es vertical,gracias
    http://ladyruss.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Parece que cuando has pegado el último código se fueron los estilos que tengo en la entrada. Elimina el código dentro del gadget y cópialo de nuevo desde esta entrada, pero, cuando lo pegues, verás que en la ventanita del gadget hay arriba un texto con un enlace, dale click y luego pega el código.

      Eliminar
    2. Lo he hecho, pero no se puede seleccionar la subpestaña 1.1, se oculta de todas formas no sale en vertical como yo quiero.
      Y otra cosa podria posicionarla en el lado izquierdo donde esta "Moda" por que los gadget estan situados en el centro.
      Gracias por todo y tu empeño.

      Eliminar
    3. Ya no veo este menú en tu blog.

      Eliminar
  123. Hola Potro, he querido insertar 4 subpestañas en la ultima pestaña del menú vertical y sólo me inserta una más. ¿qué estoy haciendo mal? O no se pueden poner más.
    Salu2
    http://mispadressonprimerizos.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Gùde, en el código fuente sólo ve tres, "APRENDIENDO A DORMIR", "Subpestaña 2" y "Subpestaña 3", no veo la cuarta.

      Eliminar
    2. No se a q codigo fuente te refieres ya q "aprendiendo a dormir" no está en esa pestaña q digo yo.

      La última pestaña a la q me refiero es "a los padres" y tiene ya 4 subpestañas completas. Ahora quiero insertar 4 más ya q quiero poner 4 temas más. El blog es http://mispadressonprimerizos.blogspot.com

      Eliminar
    3. Tienes razón Gùde, estaba viendo el otro menú.
      Veo 4 subpestañas, pero no veo indicios de que hayas añadido otras más. Sólo tienes que poner debajo del LI titulado "FIEBRE", esto:

      <li><a href="URL del enlace">Pestaña 6.2</a></li>
      <li><a href="URL del enlace">Pestaña 6.3</a></li>
      <li><a href="URL del enlace">Pestaña 6.4</a></li>
      <li><a href="URL del enlace">Pestaña 6.5</a></li>

      Eliminar
    4. Potro, solo veias 4 subpestañas porq ya hice eso mismo q me has mandado y no salian las 4 subpestañas así q lo borré hasta esperar tu respuesta, ahora lo he vuelto a añadir y ocurre lo mismo... solo sale 1 subpestaña, qué pasa?

      Eliminar
    5. Siempre hay que dejar puesto el código aunque no funcione, porque si no yo entro y no me enteró de cuál pueda ser la causa :/
      El problema es que el contenido de ese gadget de presentación es más reducido que lo que necesita todo el menú para poder mostrarse completo. Si el contenido de ese gadget fuera más extenso entonces habría más espacio a lo largo, y por lo tanto se podrían mostrar las nuevas subpestañas que agregaste.

      Eliminar
    6. Gracias x la explicación pero, debido a mi ignorancia, no se lo q debo hacer para ampliar el "contenido" del gadget... creí entender, como explicas al final del post, que si deseamos añadir una pestaña agregaramos simplemente un código. Por eso creí que para añadir una subpestaña sería igual de simple y no se que debo hacer ahora, entonces.
      En el caso de q fuera el menú horizontal, tendría q hacer lo mismo para ampliar ese gadget?

      Salu2

      Eliminar
    7. Si es horizontal no habrá problema, a menos que las subpestañas se vuelvan demasiado extensas.
      Con lo anterior me refería a esto, tu gadget de texto mide aproximadamente 450px de alto, el menú vertical con las nuevas subpestañas que agregaste mide más que eso. Como el contenido del primero es menor, entonces las nuevas subpestañas no tienen espacio para mostrarse, a menos que el gadget de texto mida más, ¿cómo hacer para que mida más? puedes ponerle más contenido a ese gadget, más texto por ejemplo, o bien, si ya no quieres agregarle más texto podrías añadir saltos de línea al final, eso puedes hacerlo agregando después de "Editor:" varias etiquetas como esta:
      <br/>

      Eliminar
  124. Perfecto, ya entendí, apliqué y salieron más subpestañas. Gracias de nuevo.

    ResponderEliminar
  125. Hola yo tengo que poner este menu en el lado derecho, habria algun modo de que se desplegara hacia la izquierda en vez de a la derecha?

    ResponderEliminar
    Respuestas
    1. No se decirte, nunca he hecho uno que se despliegue de esa manera :(

      Eliminar
  126. pero se podria? alomejor solo hay que cambiarle algun codigo de los de despliegue no? yo es que de esto de html ccs y java estoy mas que pegado por lo que no se que es cada cosa y modifico las cosas toqueteando, pero ya codigos no se escribirlos, haber si me podeis ayudar es que por ningun lado hay barras laterales que desplieguen hacia la izquierda y no se porque que forma de discriminar a los zurdos! :P bueno espero respuesta

    ResponderEliminar
    Respuestas
    1. La verdad es que nunca he visto alguno que se despliegue de esa manera, si me entero de algo lo publico ;)

      Eliminar
  127. Hola Potro,
    He utilizado este menú para mi página web pero no logro que me despliegue los elementos, de hecho sólo despliega el primer elemento del menú y el resto nada, esto para IE explorer 9.

    Pongo el menú css como lo tengo ahora por si me puedes echar una mano, lo q sea, una luz sobre q puedo estar haciendo mal.

    Gracias.

    #menuvertical {
    text-align: left;
    width:180px;
    position: absolute;
    top:190px;
    left: 3px;
    position: relative\9;
    top:175px\9;
    /*opacity: .9;*/
    z-index: 99;
    border: 2px solid #ffc82b;
    list-style-type: none\9;
    }

    #menuvertical_location {
    position: absolute;
    top:11px;
    left: 170px;
    position: relative\9;
    top:11px\9;
    left: 170px\9;
    }

    #menuvertical ul {
    list-style-type: none;
    padding:0;
    }

    #menuvertical ul li.nivel1 {
    width: 180px; /* Ancho de las pestañas */
    }
    #menuvertical ul li.primera { /*Líneas división celdas*/
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #e0d9aa;
    }
    #menuvertical ul li {
    padding:0;
    background-image: url(../images/flecha_categoria.png);
    background-repeat: no-repeat;
    background-position: right center;
    /*display: block;
    width: 40%;
    float: left;*/
    }

    #menuvertical ul li a {
    display: block;
    text-decoration: none;
    color: #9c503b; /* Color del texto */
    background-color: #fff3d6; /* Color de fondo */
    border: solid 0px #fee; /* Borde de las pestañas */
    border-top: none;
    padding: 10px; /*Ancho celda*/
    position: relative;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    }
    #menuvertical ul li:hover {
    position: relative;
    color: #000; /* Color del texto al pasar el mouse */
    }
    #menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
    background-color: #FFF; /* Color de fondo al pasar el mouse */
    color: #000;
    position: relative;
    list-style-type: none;
    border: 1px solid #d6d6e6;

    }
    #menuvertical ul li a.nivel1 {
    display: block !important;
    display: none;
    position: relative;
    }
    #menuvertical ul li ul {
    display: none;
    border: 1px solid #d6d6e6;
    }
    #menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
    display: block;
    position: absolute;
    left: 179px;
    top: -1px;
    position: absolute\9;
    left: 179px\9;
    top: -1px\9;
    /*border: 1px solid #d6d6e6;*/
    }

    #menuvertical ul li ul li a { /*COLOR AZULLLLLLLLLLLLLLLL*/
    background-color: #FFF; /* Color de fondo subpestañas */
    color: #103856; /* Color del texto subpestañas */
    width: 300px;
    border: 0px solid #ffc82b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }

    #menuvertical ul li ul li a:hover {
    position: relative;
    /*background-color: #6E6E6E;*/ /* Color de fondo al pasar el mouse subpestañas */
    color: #ff7800; /* Color del texto al pasar el mouse subpestañas */
    border-top-style: none; /*Para q no halla bordes sobre el submenú al hacer hover sobre el menu de nivel 1*/
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

    ResponderEliminar
  128. Hola Potro,
    He utilizado este menú para mi página web pero no logro que me despliegue los elementos, de hecho sólo despliega el primer elemento del menú y el resto nada, esto para IE explorer 9.

    Pongo el menú css como lo tengo ahora por si me puedes echar una mano, lo q sea, una luz sobre q puedo estar haciendo mal.

    Gracias.

    CSS:

    #menuvertical {
    text-align: left;
    width:180px;
    position: absolute;
    top:190px;
    left: 3px;
    position: relative\9;
    top:175px\9;
    /*opacity: .9;*/
    z-index: 99;
    border: 2px solid #ffc82b;
    list-style-type: none\9;
    }

    #menuvertical_location {
    position: absolute;
    top:11px;
    left: 170px;
    position: relative\9;
    top:11px\9;
    left: 170px\9;
    }

    #menuvertical ul {
    list-style-type: none;
    padding:0;
    }

    #menuvertical ul li.nivel1 {
    width: 180px; /* Ancho de las pestañas */
    }
    #menuvertical ul li.primera { /*Líneas división celdas*/
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #e0d9aa;
    }
    #menuvertical ul li {
    padding:0;
    background-image: url(../images/flecha_categoria.png);
    background-repeat: no-repeat;
    background-position: right center;
    /*display: block;
    width: 40%;
    float: left;*/
    }

    #menuvertical ul li a {
    display: block;
    text-decoration: none;
    color: #9c503b; /* Color del texto */
    background-color: #fff3d6; /* Color de fondo */
    border: solid 0px #fee; /* Borde de las pestañas */
    border-top: none;
    padding: 10px; /*Ancho celda*/
    position: relative;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    }
    #menuvertical ul li:hover {
    position: relative;
    color: #000; /* Color del texto al pasar el mouse */
    }
    #menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
    background-color: #FFF; /* Color de fondo al pasar el mouse */
    color: #000;
    position: relative;
    list-style-type: none;
    border: 1px solid #d6d6e6;

    }
    #menuvertical ul li a.nivel1 {
    display: block !important;
    display: none;
    position: relative;
    }
    #menuvertical ul li ul {
    display: none;
    border: 1px solid #d6d6e6;
    }
    #menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
    display: block;
    position: absolute;
    left: 179px;
    top: -1px;
    position: absolute\9;
    left: 179px\9;
    top: -1px\9;
    /*border: 1px solid #d6d6e6;*/
    }

    #menuvertical ul li ul li a { /*COLOR AZULLLLLLLLLLLLLLLL*/
    background-color: #FFF; /* Color de fondo subpestañas */
    color: #103856; /* Color del texto subpestañas */
    width: 300px;
    border: 0px solid #ffc82b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }

    #menuvertical ul li ul li a:hover {
    position: relative;
    /*background-color: #6E6E6E;*/ /* Color de fondo al pasar el mouse subpestañas */
    color: #ff7800; /* Color del texto al pasar el mouse subpestañas */
    border-top-style: none; /*Para q no halla bordes sobre el submenú al hacer hover sobre el menu de nivel 1*/
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

    ResponderEliminar
    Respuestas
    1. Hola JustMe, pon el código tal como está en la entrada, de esa forma no debería darte problemas.

      Eliminar
  129. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Parece que lo has conseguido Daniel, no veo subpestañas en ese menú :)
      Pd. Elimino el comentario por el aviso que está al final.
      ¡Saludos!

      Eliminar
  130. Buenisimo me sirvio muchisimo y no fue nada complicado GRACIAS muchas GRACIAS

    ResponderEliminar
  131. Hola Potro, como siempre eres un master de esto. ¿Se puede hacer este menú pegado por completo a la derecha ocupando todo el espacio de la pantalla y que en lugar de color azul , tenga imágenes? Necesito hacer algo como esto http://camaronpanzon.blogspot.mx/

    Espero me puedas ayudar amigo, gracias.

    ResponderEliminar
    Respuestas
    1. Hola, parece que ya has conseguido un menú similar.
      Saludos.

      Eliminar
  132. Potro el menu es fantástico pero no me queda centrado, fíjate: http://4.bp.blogspot.com/-MCwl2I15YBQ/Uiy1l-XnSWI/AAAAAAAAcRo/l-0iAcQfNgM/s1600/xxzz.jpg

    Como hago para centrarlo?

    Un saludo y gracias por tu ayuda

    ResponderEliminar
    Respuestas
    1. Hola, puedes poner un margen debajo de #menuvertical {
      Por ejemplo:
      margin-left:40px;

      Eliminar
  133. Hola potro al poner el menu sale escorado hacia el lado ixquierdo fuera del recuadr. Co se puede poner mas centrado=?

    ResponderEliminar
  134. ¡Se agradece la disponibilida de estos códigos! Estaba buscando un menú desplegable que me agradara y no fuera dificil decolocar y editar. No lo utilicé en un foro, por lo que tuve que poner las cosas en otros lados, pero la base era la misma. Cambié los colores y agregué cosas, quedó muy lindo.

    ¡Gracias!

    ResponderEliminar
  135. No me aparecen subpestañas. http://www.euroganancia.blogspot.com

    ResponderEliminar
  136. Hey hola, gran información, pero amm, sería posible agregar un subnivel mas (y cual seria la manera correcta)?

    P. S. Modificando algunos parámetros pude hacerlo pero no logro que sea desplegable, es decir, los niveles 2 y 3 se despliegan a la par cuando me colo en la fila "X" de la columna 1 ...

    ResponderEliminar
    Respuestas
    1. Te lo debo, no lo he intentado con este menú y el tiempo ahorita me come para poder hacer pruebas :(

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger