Foros del Web » Creando para Internet » CSS »

Menu desplegable 100% CSS

Estas en el tema de Menu desplegable 100% CSS en el foro de CSS en Foros del Web. Hola a todos, soy nuevo en este foro y me inscribí con el fin de agradecer a MIKIMORO su extraordinario trabajo y dedicación para crear ...

  #271 (permalink)  
Antiguo 20/01/2010, 09:23
 
Fecha de Ingreso: enero-2010
Ubicación: Tashkent
Mensajes: 32
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Menu desplegable 100% CSS

Hola a todos, soy nuevo en este foro y me inscribí con el fin de agradecer a MIKIMORO su extraordinario trabajo y dedicación para crear un menú desplegable. No sé si leerás esta respuesta, porque he visto que desde Setiembre pasado no intervienes en el foro, igual tienes buenos discípulos que pueden continuar por ti.
Aunque te hayas retirado, cansado, jubilado o lo que sea, igual tu obra perdura. Eso es lo bueno en un ser humano, que no pasa por la vida como un vegetal.
Un gran abrazo.
Antonio
  #272 (permalink)  
Antiguo 16/02/2010, 08:37
 
Fecha de Ingreso: febrero-2010
Mensajes: 3
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Hola a todos. No sé si han llegado a enterarse pero se ha encontrado otro sistema de menús sólo con CSS y que no apela a comentarios condicionales en la página: http://thinkhtml.blogspot.com/

Inspirado en el ejemplo de Timo, he creado un sistema de menú tipo acordeón con sólo CSS. En su última versión incluye el efecto deslizante mediante CSS3 "transitions" (actualmente funcional en Chrome y Safari, en desarrollo en Firefox y Opera) y SMIL (para IE): http://aranedaalejandro.wordpress.com
  #273 (permalink)  
Antiguo 24/03/2010, 08:44
 
Fecha de Ingreso: julio-2009
Mensajes: 60
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Mikmoro, con respecto al primer Menu CSS que escribiste en el primer post, si yo quiero agregarle más menús debajo, no me deja seleccionar bien los links de los <li> de segundo nivel. ¿Existe alguna solución?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Menu desplegable CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
</div>
</body>
</html>
  #274 (permalink)  
Antiguo 27/04/2010, 05:49
 
Fecha de Ingreso: abril-2010
Mensajes: 50
Antigüedad: 6 años, 8 meses
Puntos: 2
Respuesta: Menu desplegable 100% CSS

Muchas gracias.
  #275 (permalink)  
Antiguo 03/06/2010, 23:14
 
Fecha de Ingreso: junio-2010
Mensajes: 1
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Necesito hacer un menú vertical que se despliega a la izquerda...alguien me puede ayudar con eso please
  #276 (permalink)  
Antiguo 03/06/2010, 23:23
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 7 años, 4 meses
Puntos: 137
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por masuv Ver Mensaje
Necesito hacer un menú vertical que se despliega a la izquerda...alguien me puede ayudar con eso please
lee este mismo post y las faqs
  #277 (permalink)  
Antiguo 12/06/2010, 16:25
Avatar de nicolaslt  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 119
Antigüedad: 7 años, 8 meses
Puntos: 5
Respuesta: Menu desplegable 100% CSS

Que grande!!

:)
  #278 (permalink)  
Antiguo 09/07/2010, 05:21
 
Fecha de Ingreso: julio-2010
Mensajes: 1
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Hola!!! He hecho un menú vertical con el ejemplo MENU 5 y en los enlaces de que llevan submenú y en ese momento están activos no me funcionan. Os pongo el código:

Código HTML:
Ver original
  1. <div id="menu" style="position:absolute; left: 2px; top: 221px; z-index:2;">
  2. <ul>
  3.   <li class="nivel1 primera"><a href="index.htm" class="nivel1"><img src="flechita.gif" width="17" height="17" border="0" style="vertical-align:middle " />&nbsp;&nbsp;EMPRESA</a>
  4. <!--[if lte IE 6 ><a href="#" class="nivel1ie">EMPRESA<table class="falsa"><tr><td><![endif]-->
  5. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  6.   </li>
  7.   <li class="nivel1"><a href="productos.htm" class="nivel1"><img src="flechita.gif" width="17" height="17" border="0" style="vertical-align:middle " />&nbsp;&nbsp;PRODUCTOS  > </a>
  8. <!--[if lte IE 6]><a href="#" class="nivel1ie">PRODUCTOS<table class="falsa"><tr><td><![endif]-->
  9.     <ul>
  10.         <li class="primera"><a href="garbanzo.htm"> · GARBANZO</a></li>
  11.         <li><a href="frijol.htm"> · FRIJOL</a></li>
  12.         <li><a href="ajonjoli.htm"> · AJONJO&Iacute;</a></li>
  13.         <li><a href="nuez.htm"> · NUEZ</a></li>
  14.     </ul>
  15. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  16. </li>
  17.   <li class="nivel1"><a href="procal.htm" class="nivel1"><img src="flechita.gif" width="17" height="17" border="0" style="vertical-align:middle " />&nbsp;&nbsp;PROCESO Y CALIDAD</a>
  18. <!--[if lte IE 6]><a href="#" class="nivel1ie">PROCESO Y CALIDAD<table class="falsa"><tr><td><![endif]-->
  19. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  20.   </li>
  21.   <li class="nivel1"><a href="contacto.htm" class="nivel1"><img src="flechita.gif" width="17" height="17" border="0" style="vertical-align:middle " />&nbsp;&nbsp;CONTACTO</a>
  22. <!--[if lte IE 6]><a href="#" class="nivel1ie">CONTACTO<table class="falsa"><tr><td><![endif]-->
  23.   </li>
  24. </ul>
  25. </div>
El error me aparece en la página productos, garbanzos, ajonjoli, frijol y nuez. A no he comentado que el error me da en IE8, en mozilla funciona a la perfección.

Saludos!! Y gracias de antemano!!
  #279 (permalink)  
Antiguo 14/07/2010, 11:59
 
Fecha de Ingreso: julio-2010
Mensajes: 10
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

mikmoro yo tengo una pregunta soy nuevo en esto de css quiseiera saber como bajar estos menus ya tengo una web bueno pequeñita pero no he podido diseñar un menu como estos me dices como los bajo porfavor
  #280 (permalink)  
Antiguo 14/07/2010, 12:01
 
Fecha de Ingreso: julio-2010
Mensajes: 10
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

mikmoro yo tengo una pregunta soy nuevo en esto de css quiseiera saber como bajar estos menus ya tengo una web bueno pequeñita pero no he podido diseñar un menu como estos me dices como los bajo porfavor, si tienes una respuesta o alguien tiene una respuesta a mi peticion favor mandarme un mensaje con las instrucciones a mi correo es [email protected] gracias a todos
  #281 (permalink)  
Antiguo 14/07/2010, 12:09
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.912
Antigüedad: 8 años, 8 meses
Puntos: 1304
Respuesta: Menu desplegable 100% CSS

Solo copias el código (html y css).

Saludos
__________________
Grupo Telegram Docker en Español
  #282 (permalink)  
Antiguo 09/08/2010, 12:30
 
Fecha de Ingreso: agosto-2010
Mensajes: 1
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

hola que tal, como podria hacer para redondear las puntas en el Menú 5: menú en vertical???, he intentado modificando el .css y no tengo resultado, ojala alguien me responda, gracias por todo
  #283 (permalink)  
Antiguo 18/08/2010, 15:23
 
Fecha de Ingreso: abril-2008
Mensajes: 7
Antigüedad: 8 años, 7 meses
Puntos: 0
Pregunta:Menu desplegable 100% CSS

Cordial saludo.
Mil felicitaciones por vuestra pagina.
Como soy novato en esto de paginas web, muy comedidamente le solicito que expliquen como ver o copiar el código de la pagina y la de css.
Gracias.
  #284 (permalink)  
Antiguo 18/08/2010, 15:34
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 14 años, 5 meses
Puntos: 361
Respuesta: Menu desplegable 100% CSS

Hola:

No sé de que página hablas pero desde el menú de tu navegador Ver -> Código fuente

Saludos.


Última edición por jomaruro; 21/08/2010 a las 02:16
  #285 (permalink)  
Antiguo 20/08/2010, 12:14
 
Fecha de Ingreso: junio-2010
Ubicación: Cali
Mensajes: 22
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Se puede hacer un menu horizontal que tengas links que despliegue un submenu vertical y otro link que contenga otro submenu horizontal y que a la vez pueda desplegar otr submenu vertical??? Si me hago entender????




Tengo ese menu pero no me sirve porque tengo que manejar bases de datos y este es un script Alguien que me ayude
  #286 (permalink)  
Antiguo 21/08/2010, 02:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 14 años, 5 meses
Puntos: 361
Respuesta: Menu desplegable 100% CSS

Hola:

¿Y que se desplieguen a la vez?

Saludos.

  #287 (permalink)  
Antiguo 23/08/2010, 09:59
 
Fecha de Ingreso: junio-2010
Ubicación: Cali
Mensajes: 22
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Hola

Mira tengo 16 links que tienen que caber dentro de un mismo menu.

Lo que necesito es que aparezcan como minimo 9 links con menu vertical con sus respectivos submenus, y el ultimo link = "ver el resto del menu" y que ahi aparezcan el resto de links que hacen falta del los 20, pero de forma horizontal, igualmente con sus respectivos submenus y que estos se depliegue verticalmente.

Gracias por tu ayuda
  #288 (permalink)  
Antiguo 23/08/2010, 15:32
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 14 años, 5 meses
Puntos: 361
Respuesta: Menu desplegable 100% CSS

Hola:

Date una vuelta por las FAQ's de CSS, a ver si alguno de los menús aportados por Mikmoro te sirve de algo.

Saludos.

  #289 (permalink)  
Antiguo 23/08/2010, 17:12
 
Fecha de Ingreso: junio-2010
Ubicación: Cali
Mensajes: 22
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

ya no es necesario, encontre la solucion a mi problema =)


Algo un poco chambona pero igual sirve
jijiji

= gracias


  #290 (permalink)  
Antiguo 08/09/2010, 17:29
 
Fecha de Ingreso: septiembre-2010
Mensajes: 2
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

hola a todos, tengo una duda que me está volviendo loco, y no logro encontrar el problema. veo que a todo el mundo le funcionó, y no veo que mi problema se haya repetido en el hilo.

El inconveniente: quiero usar el primer menu (horizontal y que se despliegue hacia abajo) pero no logro hacer que el menu me aparezca centrado. El nivel 2 parece que sí aparece centrado con respecto al contenedor general, entonces sucede que el nivel 2 se ve corrido hacia la derecha del nivel 1 (que no está centrado)

pego el código css, a ver si me pueden ayudar:

@charset "utf-8";
/* CSS Document */

/* Propiedades del fondo, para que ocupe todo el fondo de pantalla */

html, body {
background-color: #0e4663;
}

/* estilo que permite que el contenido del sitio se sitúe encima del fondo */

#scrollable {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:auto;
z-index:2;
}

/* caja */


#contenedor {
width: 760px;
margin: auto;
text-align: left;
background-color: #dde0db;
padding: 10px;
}

/* estilos de cabecera */

#cabecera {
text-align: center;
margin: auto;
}

#img_cabecera {
text-align: center;
margin: auto;
width:760px;
height:160px;
background-image: url('../img/encabezado.jpg');
}

#menu {
text-align: center;
font-family: Arial, sans-serif;
font-size: 10pt;
background-color: #094a2b;
width: 760px;
height: 25px;
margin: 0 auto;
}

#menu ul { list-style-type: none;}

#menu ul li.nivel1 { float: left;
width: 100px;
margin-right: 1px;
padding: 5px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #094a2b;
position: relative;
}

#menu ul li:hover {position: relative;
}

#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}

#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}

#menu ul li ul {display: none;
}

#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 100px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}



/* estilos de contenido */

#colcont {
width: 740px;
background: #ccd6ce;
float: left;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
}

#col1 {
width: 350px;
float: left;
font-family: Arial, sans-serif;
font-size: 10pt;
color: #0e4663;
text-align: left;
margin-left: 10px;
}

#col2 {
width: 350px;
float: left;
font-family: Arial, sans-serif;
font-size: 10pt;
color: #0e4663;
text-align: left;
margin-top: 40px;
margin-left: 20px;
}


/* estilos de pie */

#pie {
width: 760px;
font-family: Arial, sans-serif;
font-size: 8pt;
font-weight: strong;
color: #dde0db;
text-align: center;
background: #0e4663;
padding: 3px 0px 3px 0px;
margin-top: 10px;
clear: both;
}



/* estilos de formulario de contacto */

input {
width:330px;
height:20px;
color:#000;
font-family: Arial, sans-serif;
}

#boton {
float:left;
background:#fff;
color:#c4161c;
width: 50px;
height: 20px;
font-family: Arial, sans-serif;
font-size: 10px;
outline:none;
border: 0px;
}

.estilotextarea {
width: 330px;
height: 200px;
}

/* estilo de texto del contenido */

.titulo {
font-family: Arial, sans-serif;
font-size: 13pt;
text-align: left;
color: #0e4663;
font-weight: bold;
}

.subtitulo {
font-family: Arial, sans-serif;
font-size: 9pt;
text-align: left;
color: #0e4663;
font-weight: bold;
}

.requeridos {
font-family: Arial, sans-serif;
font-size: 9pt;
text-align: left;
color: #005b7b;
font-style:italic;
}

Espero que alguna persona pueda ayudarme, desde ya gracias!
  #291 (permalink)  
Antiguo 14/09/2010, 16:46
 
Fecha de Ingreso: septiembre-2010
Mensajes: 2
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

ya lo solucioné, gracias de todos modos.
  #292 (permalink)  
Antiguo 16/09/2010, 08:16
 
Fecha de Ingreso: mayo-2009
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Buenas tardes,

He intentado usar el menu 4, horizontal pulsado, en IE8, y no se ve correctamente, quedando el submenu detrás de los botones principales. Hay forma de arreglarlo?.

Yo ya tengo adaptado para lo que necesito el menu 2, existe algún código del css que cambiandolo se quede como el menu 4, es decir, que no sea hover, sino pulsado.

Gracias de antemano.
  #293 (permalink)  
Antiguo 03/10/2010, 06:35
 
Fecha de Ingreso: octubre-2010
Mensajes: 3
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Hola

felicidades por el post y por el curro.
Tengo una pregunta de novato total.
He insertado el menu 2 en la web q estoy haciendo y lo he adpatado en tamaño y colores pero lo q me sucede es q otra lista q tengo en web me la deforma, osea quita el tabulado original de la lista y lo pone todo a la izquierda y alineado.
he intentado cambiarlo por listas de distintos tipos y definiciones pero nada.

aq se debe ?

gracias
  #294 (permalink)  
Antiguo 08/10/2010, 03:03
 
Fecha de Ingreso: octubre-2010
Mensajes: 2
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Hola estoy utilizando el menu desplegable nº 5: http://chopinete.onlinewebshop.net/ en la barra izquierda, el tema es que con IE 6 y con mozilla se ve correctamente, pero con IE 7 y con IE 8, no se ve nada del menu, el codigo del menu es este:

<div id="menu">
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Peces Marinos</a>

<!--[if lte IE 6]> <!--[if lte IE 7]> <!--[if lte IE 8]><a href="#" class="nivel1ie">
Peces Marinos<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li class="primera"><a href="#">Acanthuridos (Peces Cirujano)</a></li>
<li><a href="#">Blenios, Gobios y Labridos</a></li>
<li><a href="#">Chaetodones (Peces Mariposa)</a></li>
<li><a href="#">Gasterostiformes(Caballitos, Pipas...)</a></li>
<li><a href="#">Pomacanthidos (Peces Angel)</a></li>
<li><a href="#">Pomacentridos (Payasos y Damiselas)</a></li>
<li><a href="#">Peces Ballesta, Halcon y Escorpion </a></li>
<li><a href="#">Serranidos y Anthias</a></li>
<li><a href="#">Otros Peces Marinos</a></li>

</ul>
<!--[if lte IE 6]><!--[if lte IE 7]> <!--[if lte IE 8]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Corales e Invertebrados</a>

<!--[if lte IE 6]><a href="#" class="nivel1ie">Corales e Invertebrados<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li class="primera"><a href="#">Anemonas</a></li>
<li><a href="#">Coral Blando</a></li>
<li><a href="#">Coral Duro LPS</a></li>
<li><a href="#">Coral Duro SPS</a></li>
<li><a href="#">Crustaceos, Camarones...</a></li>
<li><a href="#">Estrellas y Erizos</a></li>
<li><a href="#">Tridacnas y Bivalvos</a></li>
<li><a href="#">Otros Invertebrados</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Roca, Sustrato, Alga</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Roca, Sustrato, Alga<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li class="primera"><a href="#">Algas Marinas</a></li>
<li><a href="#">Roca Viva y Roca Base</a></li>
<li><a href="#">Sustratos</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Acuario de Agua Dulce</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Acuario de Agua Dulce<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li class="primera"><a href="#">Bettas</a></li>
<li><a href="#">Discos</a></li>
<li><a href="#">Escalares</a></li>
<li><a href="#">Plantas Acuaticas</a></li>
<li><a href="#">Resto Animales Acuaticos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Productos Acuariofilia</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Productos Acuariofilia<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li class="primera"><a href="#">Aditivos</a></li>
<li><a href="#">Alimentacion</a></li>
<li><a href="#">Bombas y Circulacion del Agua</a></li>
<li><a href="#">Enfriadores/Calentadores</a></li>
<li><a href="#">Iluminacion</a></li>
<li><a href="#">Reactores</a></li>
<li><a href="#">Sal Sintetica</a></li>
<li><a href="#">Skimmers</a></li>
<li><a href="#">Urnas y Sumps</a></li>

como veis al primer nivel del menu le he añadido esto:<!--[if lte IE 7]> <!--[if lte IE 8]> que como podeis ver no esta en los siguientes primeros niveles ya que al no verse en IE 7 y 8, intente hacer una prueba a ver si asi se veia, pero tampoco se ve con este sistema.
Si le cambio el html y le indico:
<!--[if lte IE *]><a href="#" class="nivel1ie">
si que se ve en IE 7 y 8 el menu, pero entonces tengo el problema de que se ve tambien en la web la orden <!--[if lte IE *]> y no queda bien ya que aparece encima de cada nivel del menu dicha orden que en teoria tendria que estar oculta.
Alguien saber como resolver el problema y hacer que se vea correcto en IE 7 y 8??

De la hoja de estilos solo he cambiado el color del fondo y de los enlaces el resto es igual que la que tenemos en el foro.
  #295 (permalink)  
Antiguo 08/10/2010, 09:30
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 784
Antigüedad: 6 años, 3 meses
Puntos: 14
Respuesta: Menu desplegable 100% CSS

pedazo de ayuda ^^ un 10!!!!:aplauso :
  #296 (permalink)  
Antiguo 12/10/2010, 15:32
 
Fecha de Ingreso: octubre-2010
Mensajes: 3
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

yo tampoco consigo hacerlo funcionar en IE8.

[URL="http://www.espinabifidasevilla.es"]http://www.espinabifidasevilla.es[/URL]
  #297 (permalink)  
Antiguo 14/10/2010, 18:05
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

¡Increible trabajo Mikmoro!
Me has dejado asombrado.

Imagino que se puede ir extendiendo como un árbol, cada una de las opciones...
  #298 (permalink)  
Antiguo 22/10/2010, 18:03
 
Fecha de Ingreso: octubre-2010
Mensajes: 3
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por nonocampa Ver Mensaje
yo tampoco consigo hacerlo funcionar en IE8.

[URL="http://www.espinabifidasevilla.es"]http://www.espinabifidasevilla.es[/URL]
Al final he tenido q optar por el IE8.js para poderlo mostrar en IE8 pero sigo sin poder ccentrar las cabeceras del nivel1. si sabeis como me lo podeis decir ?

gracias.


[URL="http://www.espinabifidasevilla.es"]www.espinabifidasevilla.es[/URL]

P.D. Gracias por el menú.
  #299 (permalink)  
Antiguo 28/12/2010, 10:57
 
Fecha de Ingreso: abril-2010
Mensajes: 1
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Yo lo monte en la siguiente pagina pero no se porque se me descuadro el nivel 2 y además al pasar el mouse en el menú y al pasar al nivel 2 no se deja seleccionar, alguien me puede ayudar mil gracias de antemano.

ver aqui www.asellerator.com


Ricardo
  #300 (permalink)  
Antiguo 28/12/2010, 13:33
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 784
Antigüedad: 6 años, 3 meses
Puntos: 14
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por opcionuno Ver Mensaje
Yo lo monte en la siguiente pagina pero no se porque se me descuadro el nivel 2 y además al pasar el mouse en el menú y al pasar al nivel 2 no se deja seleccionar, alguien me puede ayudar mil gracias de antemano.

ver aqui www.asellerator.com


Ricardo
Verás, el descuadre viene dado por que usa la propiedad del margen para situar las cajas con más o menos desplazamiento. Prueba a ver en el css del nivel2 del menú (lo siento pero no recuerdo qué nombre le daba en el estilo) y juega con dicha propiedad....creo también que por eso no te permite en ocasiones seleccionar el submenú....ya me comentas a ver si te ha servido de ayuda =)
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 54 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 21:57.