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. Disculpa Mikmoro, me equivoqué al pegar el código estaba haciendo modificaciones y cambié el li por un a, en realidad lo que tengo es esto. ...

  #241 (permalink)  
Antiguo 20/06/2009, 05:35
Avatar de S-Virus  
Fecha de Ingreso: enero-2004
Mensajes: 112
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Disculpa Mikmoro, me equivoqué al pegar el código estaba haciendo modificaciones y cambié el li por un a, en realidad lo que tengo es esto.

Código:
ul.menu ul {
        visibility:hidden;
    }
ul.menu li:hover > ul {
        visibility:visible;
}
He probado la solución que has posteado pero nada :S, en IE 6 no me va.

PD: Lo he sustituido por esto otro

.menunivel1 ul {
visibility:hidden;
}

.menunivel1:hover ul {
visibility:visible;
}

Usando una clase que ya tenía creada para los estilos del menu, únicamente decir que la clase está aplicada al li del menu principal y creo que por eso puede ser el fallo no?, el hover en un li no lo soporta IE 6.
__________________
DISEÑADOR WEB MULTIMEDIA :: STUDIOFLASH
  #242 (permalink)  
Antiguo 20/06/2009, 06:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por S-Virus Ver Mensaje
Usando una clase que ya tenía creada para los estilos del menu, únicamente decir que la clase está aplicada al li del menu principal y creo que por eso puede ser el fallo no?, el hover en un li no lo soporta IE 6.
Claro, pero lo extraño es que eso lo preguntes en este hilo, porque justamente todo él se basa práctiamente en eso, en cómo solucionar que IE6 sólo puede usar :hover en elementos de enlace (A).

Sólo con que mires cómo están hechos los menús del primer mensaje verás a qué me refiero.
  #243 (permalink)  
Antiguo 20/06/2009, 07:52
Avatar de S-Virus  
Fecha de Ingreso: enero-2004
Mensajes: 112
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

debo de ser sumamente torpe porque no entiendo la solucion. :(
__________________
DISEÑADOR WEB MULTIMEDIA :: STUDIOFLASH
  #244 (permalink)  
Antiguo 20/06/2009, 09:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por S-Virus Ver Mensaje
debo de ser sumamente torpe porque no entiendo la solucion. :(
No lo creo, pero sí debes mirar con atención el código fuente y ver qué es lo que parece ser especial.

¿Sabes lo que son los comentarios condicionales y para qué se usan? Si no es así, deberás empezar por buscar informaciópn al respecto.

En cualqueir caso, creo que vas a tener que perder un rato y leer buena parte del hilo, porque en él está explicado prácticamente todo.

Última edición por Mikmoro; 20/06/2009 a las 09:45
  #245 (permalink)  
Antiguo 20/06/2009, 16:00
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 5 meses
Puntos: 269
Respuesta: Menu desplegable 100% CSS

IMPRESIONANTE! Mickmoro, de tremenda utilidad su post.
  #246 (permalink)  
Antiguo 12/07/2009, 05:55
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 7 años, 10 meses
Puntos: 306
Respuesta: Menu desplegable 100% CSS

Muchas Gracias, Mickmoro, la verdad que tu página araudi.net es un manual de consultas y de búsqueda de recursos bárbara.
Y no solo lo digo porque haya tomado prestado uno de tus menues css (me declaro culpable) el cual agradezco de nuevo, sino porque gracias a ella he comenzado a comprender varias cosas que no tenia clara. Y ese es tal vez el mejor aporte que se puede hacer. Gracias
  #247 (permalink)  
Antiguo 20/07/2009, 11:23
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Gracias Mikmoro.
He visto tus menús dinámicos verticales y horizontales muy útiles para mi, cómo puedo hacer para que al pasar el ratón por cada uno de los links se muestre una imagen distinta y desaparezca al salir el ratón del mismo? la imagen debe mostrarse al lado derecho del link, ¿se puede hacer con ventanas emergentes, popup etc?
Perdonar mi ignorancia pero soy nuevo en el diseño de páginas Web.
Hay programas como Sothink.DHTMLMenu y ultramenú pero no los encuentro en castellano.
Gracias a todos.
laszarzitas
  #248 (permalink)  
Antiguo 20/07/2009, 11:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 6 meses
Puntos: 538
Respuesta: Menu desplegable 100% CSS

Hola Laszarzitas
No creo conveniente que un tema que ya tienes abierto aquí lo dupliques

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #249 (permalink)  
Antiguo 22/07/2009, 09:32
 
Fecha de Ingreso: agosto-2008
Ubicación: Cali . Colombia
Mensajes: 459
Antigüedad: 8 años, 3 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

Excelente aporte gracias
  #250 (permalink)  
Antiguo 11/09/2009, 10:03
 
Fecha de Ingreso: septiembre-2009
Mensajes: 67
Antigüedad: 7 años, 2 meses
Puntos: 2
Respuesta: Menu desplegable 100% CSS

Tengo un problema con un menu desplegable implementado con css. si alguien pude sacarme esta duda.

El error esta en que tanto el nivel 3 como 4 se muestran superpuestos (no a 153px...)

Les paso el codigo, desde ya gracias por su ayuda.

css=>

html {
margin: 0;
padding: 0;
}

body {
margin: 0;
padding: 0;
background-color: #EFFBFB;
background-repeat: repeat;
width: 100%;
height: 100%;
color: #184B75;
background-image: url("../img/fon.gif");
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#mad {
position: absolute;
margin: 20px 17px 20px 17px;
padding: 0;
left: 0;
right: 0;
top: 0;
width: auto;
height: 95%;
background-color: #EFFBFB;
text-align: center;
z-index: 0;
}

#menu {
position: absolute;
left: 0;
top: 114px;
width: 153px;
height: auto;
padding: 0;
margin: 0;
font-size: 12px;
background-color: #EFFBFB; /* celeste */
text-align: left;
z-index: 99999;
}

#menu p {
text-align: left;
margin: 0;
padding: 0px 2px 6px 6px;
}

#menu p.ley {
text-align: left;
margin: 0;
padding: 0px 2px 0px 6px;
font-size: 9px;
}

#menu ul {
padding: 0;
margin: 0;
list-style-type: none;
font-weight: bold;
}

#menu ul li.nivel1 {
width: 153px;
border: solid 1px #185B92; /* azul */;
border-top: none;
border-collapse:collapse;
}

#menu ul li.primera {
border-top: solid 1px #185B92; azul */
}

#menu ul li a { /* opcion ppal */
display: block;
text-decoration: none;
color: #fff; /* letra blanca */
background-color: #3183A7; /* azulado */
border: solid 1px #185B92; /* azul */;
border-top: none;
padding: 6px;
position: relative;
}

#menu ul li:hover {
position: relative;
background-color: #C2DAE5; /* celeste */
color: #000; /* letra azulado */
}

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
/* selecciona opcion ppal */
background-color: #C2DAE5; /* celeste */
color: #3183A7; /* letra azulado */
position: relative;
}

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

#menu ul li ul {display: none;}

#menu ul li:hover > ul {
display: block;
position: absolute;
left: 153px;
top:-1px;
}

#menu ul li ul li a {
/* nivel 2 */
width: 153px;
background-color: #3183A7; /* azulado */
color: white;
position: relative;
}

#menu ul li ul li a:hover {
/* cuando se marca nivel 2 */
position: relative;
background-color: #C2DAE5; /* celeste */
color: #3183A7; /* letra azulado */
}

#menu ul li a.nivel1ie {
width: 153px;
padding: 6px;
}

#menu ul li a.subnivel {
padding-bottom: 6px;
}

#menu ul li a:hover ul.nivel2, #menu ul.nivel2 li a:hover ul.nivel3, #menu ul.nivel3 li a:hover ul.nivel4 {
display: block;
position: absolute;
left: 153px;
top:-1px;
}

table.falsa {
border-collapse:collapse;
border:0px;
float: left;
}

#cont {
position: absolute;
margin: 0;
padding: 0;
left: 160px;
right: 1px;
top: 114px;
height: auto;
width: auto;
background-color: #FFFFFF;
border-width: 1px;
border-style: solid;
border-color: #185B92;
z-index: 1;
}

html =>

<html>
<head>
<meta http-equiv="Content-Language" content="es-ar">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link media="screen" href="est.css" type="text/css" rel="stylesheet">

<!--[if IE 6]><style>#menu ul li.nivel1 {margin-bottom:-1px} #menu ul li {width: 153px;}</style><![endif]-->
<!--[if IE 7]><style>#menu ul li.nivel1 {margin-bottom:-3px}</style><![endif]-->
</head>

<body>

<div id="mad">

<div id="menu">
<br class="menubr">

<p>
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li class="primera"><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 class="nivel2">
<li class="primera"><a href="#" class="nivel1">Opción 2.1</a>
<!--[if lte IE 6]><a href="#" class="subnivel">Opción 2.1<table class="falsa"><tr><td><![endif]-->

<ul class="nivel3">
<li class="primera"><a href="#" class="nivel1">Opción 2.1.1</a>
<!--[if lte IE 6]><a href="#" class="subnivel">Opción 2.1.1<table class="falsa"><tr><td><![endif]-->

<ul class="nivel4">
<li class="primera"><a href="#">Opción 2.1.1.1</a></li>
<li><a href="#">Opción 2.1.1.2</a></li>
<li><a href="#">Opción 2.1.1.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Opción 2.1.2</a></li>
<li><a href="#">Opción 2.1.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">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 class="nivel2">
<li class="primera"><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 class="nivel2">
<li class="primera"><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 class="nivel2">
<li class="primera"><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>
</p>

<br>

</div>

<div id="cont">
<br>

</div>

</div>

</body>
</html>
  #251 (permalink)  
Antiguo 11/09/2009, 12:04
 
Fecha de Ingreso: septiembre-2009
Mensajes: 306
Antigüedad: 7 años, 2 meses
Puntos: 10
Respuesta: Menu desplegable 100% CSS

estoy intentando hacer mi primer menu desplegable solo con css pero la verdad es q no termino de entender como es q funciona, estube revisadon el css de esta pagina www . csszengarden.com/?cssfile=/057/057.css&page=0 pero la sintaxis de la parte q maneja los menus nunca la habia visto antes, sintaxis como estas:
Cita:
#larchives a[accesskey="n"] {}
div[id="lselect"]>h3 {}
div[id="lresources"]>h3 {}
div[id="lselect"]>ul>li {}
div[id="lresources"]>ul>li {}
div[id="lselect"]>ul>li:first-child {}
div[id="lresources"]>ul>li:first-child {}
a simple vista me parece q son condicionales de tipo IF pero nunca habia visto eso en css, no se si sera de una version mas reciente css y si lo soportan la mayoria de browsers.

ese css tambien da un mensage si se esta usando ie6 o uno menor, sabia que se podia hacer eso con comentarios condicionales en html pero en esa pagina lo hacen atravez del css.

les agradeceria si me pudieran ilustrar un poco al respecto

Última edición por severicks; 11/09/2009 a las 12:13
  #252 (permalink)  
Antiguo 11/09/2009, 12:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 6 meses
Puntos: 538
Respuesta: Menu desplegable 100% CSS

Son selectores de atributo los div[....] {...}
El signo > se emplea para selecionar los elementos que son hijos (directos) del primero.

Creo que en los dos enlaces tienes algo de información y ejemplos al respecto.

Un saludo, Severicks, y bienvenido a fdw.
P.D.: es mejor que abras un tema nuevo para tu consulta, y en caso de estar relacionada diréctamente con algún otro mejor lo referencias, pero siempre en tema nuevo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #253 (permalink)  
Antiguo 11/09/2009, 17:33
 
Fecha de Ingreso: septiembre-2009
Mensajes: 306
Antigüedad: 7 años, 2 meses
Puntos: 10
Respuesta: Menu desplegable 100% CSS

ok gracias, crei q el tema tenia mucho q ver con este por eso no abri otro
  #254 (permalink)  
Antiguo 22/09/2009, 06:41
 
Fecha de Ingreso: mayo-2009
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Buenos dias. Una duda que me surge y tras leerme el post no lo vi comentado:

Estoy trabajando con el menu 2 (horizontal con 1 nivel) y pienso si ess posible que el color de las letras del menu principal sean de diferente color que las del nivel 1, para asi poder poner fondos diferentes que se vean??

Ya que si pongo las letras en blanco #fff ambos fondos deben ser oscuros porque sino no se ve... o no?

Gracias por la respuesta de antemano.
  #255 (permalink)  
Antiguo 22/09/2009, 08:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Sí, claro: añade el color que quieras a este selector:

#menu ul li a.nivel1 {display:block !important;
color: #tucolor;}

De todos modos, lo más fácil es cambiar colores o cualquier cosa que quieras y ver lo que ocurre. Recuerda: un cambio cada vez, y comprobar qué ha ocurrido; si no interesa, deshacer y listo.
  #256 (permalink)  
Antiguo 22/09/2009, 09:38
 
Fecha de Ingreso: mayo-2009
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Muchas gracias una vez más, Mikmoro

La verdad es que hice eso, probé en todos menos en ese, ya que al ver lo de import en rojo me echó para atrás y no me atrevi, jejeje.

Un saludo
  #257 (permalink)  
Antiguo 23/09/2009, 10:48
 
Fecha de Ingreso: mayo-2009
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Sí, claro: añade el color que quieras a este selector:

#menu ul li a.nivel1 {display:block !important;
color: #tucolor;}

De todos modos, lo más fácil es cambiar colores o cualquier cosa que quieras y ver lo que ocurre. Recuerda: un cambio cada vez, y comprobar qué ha ocurrido; si no interesa, deshacer y listo.
Buenas tardes, aqui de nuevo el "pesao".

Hice esto que me decias, pero un amigo que tiene aunnn el ie6 lo vio y me dice que salen las letras en el mismo color que en el nivel 1, que no le salen como yo las puse en blanco!!

No se si poner el css completo o que, pero a que crees que se debe??

Gracias de nuevo y perdona las molestias.
  #258 (permalink)  
Antiguo 23/09/2009, 11:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Podrías añadir este selector:

Cita:
#menu ul li a.nivel1ie {color: #f00;}
con el color que quieras.

Ahora tienes la tarea de averiguar por qué
  #259 (permalink)  
Antiguo 20/11/2009, 13:44
 
Fecha de Ingreso: marzo-2009
Ubicación: Uruguay
Mensajes: 128
Antigüedad: 7 años, 8 meses
Puntos: 8
Respuesta: Menu desplegable 100% CSS

Muchas gracias :D..

Me vienen barbaro, me los voy a guardar.
  #260 (permalink)  
Antiguo 20/11/2009, 21:23
 
Fecha de Ingreso: mayo-2009
Mensajes: 39
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

Excelente te lo agradesco mucho amigo!!!, estpoy seguro q en algun momento necesitare implementarlo
  #261 (permalink)  
Antiguo 03/12/2009, 10:38
Avatar de MisatoKatsuragi  
Fecha de Ingreso: abril-2009
Mensajes: 109
Antigüedad: 7 años, 7 meses
Puntos: 2
Respuesta: Menu desplegable 100% CSS

muy chulos!! no me han servido para lo que buscaba pero me los apunto en favoritos
  #262 (permalink)  
Antiguo 09/12/2009, 14:46
 
Fecha de Ingreso: agosto-2009
Mensajes: 73
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Buenas a todos!! aca estoy con el tema este de los menu mi pregunta es:

Yo estoy con el menu 5 de Mikmoro y lo que quiero hacer es que el submenu en vez de que me aparezca a la derecha me aparezca abajo del menu principal al que pertence.

Desde ya muchas gracias a todos!!

Saludos
  #263 (permalink)  
Antiguo 09/12/2009, 18:36
 
Fecha de Ingreso: agosto-2009
Mensajes: 73
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Ya lo pude poner hacia abajo!! otra pregunta se puede hacer un efecto acordeon con css??es decir que el menu se deslice hacia abajo con un determinado tiempo??
  #264 (permalink)  
Antiguo 12/12/2009, 00:18
Avatar de mau_87lp  
Fecha de Ingreso: diciembre-2009
Ubicación: La Plata,Buenos Aires.
Mensajes: 72
Antigüedad: 7 años
Puntos: 3
Respuesta: Menu desplegable 100% CSS

Hola muchas gracias por este aporte.
  #265 (permalink)  
Antiguo 18/12/2009, 10:28
 
Fecha de Ingreso: abril-2009
Mensajes: 2
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

hola estoy mirando [URL="http://araudi.net/Desplegables/menu_desplegable7.html"]el menu de ejemplo 7 (el de tipo acordeón)[/URL][/noparse] y me parece que su css es [URL="http://araudi.net/Desplegables/css/menu-7.css"]esta[/URL] pero mirando el código fuente veo que invocas algunas classes que no encuentro en el [URL="http://araudi.net/Desplegables/css/menu-7.css"]css[/URL].
- class="primera"
- class="nivel1 primera"
- class="nivel1"

y bueno no sé si hay más porque solo lo he mirado por encima y es obvio que estoy equivocado en algo.

Gracias

Última edición por erikops; 18/12/2009 a las 10:35
  #266 (permalink)  
Antiguo 18/12/2009, 14:35
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 lo marcado en rojo?

Código:
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {  text-align: center;
font-size: 0.7em;
width: 320px;
margin: 20px;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 {width: 162px;}

#menu ul li.primera { border-top: solid 1px #FFF;}

#menu ul li a, #menu ul li span {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;
}
a:active {position: relative;
}
#menu ul li a:active {background-color: #6CC;
color: #000;
border-bottom: solid 1px #6CC;
position: relative;
}

#menu ul li span.nivel1 {display: block;}

#menu ul li:hover span.nivel1 {cursor: pointer;}

#menu ul li ul {display: none;}
#menu ul li a:hover ul, #menu ul li a:active ul {display: block;
position: relative;width: 162px;background-color: #6CC;
}
#menu ul li a:link:hover ul {display: none;
}
#menu ul li a:active:hover ul  {display: block;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border: none;
border-top:  solid 1px #fff;
background-color: #3AB7CB;
font-weight: normal;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
color: #000;
background-color: #359BB8;
}
#menu ul li ul li.primera {border-top: none;}

table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
Saludos.

  #267 (permalink)  
Antiguo 24/12/2009, 18:19
Avatar de Hiruma-Sama  
Fecha de Ingreso: agosto-2007
Ubicación: Floresta, Buenos Aires, Argentina.
Mensajes: 234
Antigüedad: 9 años, 3 meses
Puntos: 5
Pregunta Respuesta: Menu desplegable 100% CSS

Buenas noches, pisando las fiestas :P

tengo una pequeña duda, yo 're-arme' por asi decirlo uno de los menu, pero lo que no llego a entender, es como modificar el siguiente efecto:

cuando uno se posa con el mouse sobre la opción del menu, este se desplega, ahora bien, lo que yo quisiera es que se desplegue SOLO cuando se le hace Click a la opción.

desde ya muchas gracias por su tiempo ^^
  #268 (permalink)  
Antiguo 30/12/2009, 01:52
 
Fecha de Ingreso: septiembre-2009
Mensajes: 306
Antigüedad: 7 años, 2 meses
Puntos: 10
Respuesta: Menu desplegable 100% CSS

como puedo hacer para que el segundo nivle del menu horizntal tenga siempre el 100% del ancho de la pagina? si le pongo width 100% solo toma en cuenta el ancho del li y el ul que lo contienen. hay alguna forma de hacer el ancho del segundo nivel liquido? o solo se le puede poner un ancho fijo?
__________________
Mantente al tanto del acontecer Turistico nacional
Visita el Parque Bicentenario El Salvador
  #269 (permalink)  
Antiguo 06/01/2010, 13:49
 
Fecha de Ingreso: septiembre-2009
Mensajes: 67
Antigüedad: 7 años, 2 meses
Puntos: 2
Respuesta: Menu desplegable 100% CSS

Hola, Mikmoro, en base a este aporte adapte el menu a mis necesidades.

Cita:
Iniciado por Mikmoro Ver Mensaje
Mira, [URL="http://www.araudi.net/forosdelweb/menu_desplegable_4niveles.html"]aquí hice[/URL] a petición de un usuario uno de 4 niveles, pero aun no lo he puesto en la lista.

[URL="http://www.araudi.net/forosdelweb/css/menu_4niveles.css"]Aquí la css[/URL].
Pero sigo teniendo algunos inconvenientes si podrias guiarme para solucionarlo. Basicamente mis dudas son:
- En IE7, IE8, Firefox.. .los que "toman" bien los standard, faltaria hacer dos retoques que no logro:
1) El nivel2 o nivel3 inicialmente debe presentarse "azul" y no "celeste" como aparece. Ejemplo: menu Quienes Somos / Cuerpo docente.
2) La ubicacion del nivel3 es superpuesta al nivel2.

- En IE6 no se adapta para nada bien.

- En IE5.5 es todavia peor la visualizacion.

El codigo css y html :
CSS
=> http://msp.rec.uba.ar/nuevo/css/est2.css

HTML (uso libreria ie7.js para que se visualice la columna derecha bien)
=> http://msp.rec.uba.ar/nuevo/index2.php

Gracias. Daniela
  #270 (permalink)  
Antiguo 06/01/2010, 21:53
 
Fecha de Ingreso: septiembre-2009
Mensajes: 67
Antigüedad: 7 años, 2 meses
Puntos: 2
Respuesta: Menu desplegable 100% CSS

Actualizo...

- En IE7, IE8, Firefox.. . los que "toman" bien los standard
se ve correctamente

- En IE6 no se adapta todavia del todo bien.

- En IE5.5 no se adapta todavia del todo bien.

Si alguien tiene comentarios para terminar de mejorar la visibilidad en las versiones viejas, se agradece la ayuda.

Nuevos enlaces:
CSS
=> http://msp.rec.uba.ar/css/est.css

HTML (uso libreria ie7.js para que se visualice la columna derecha bien)
=> http://msp.rec.uba.ar/index.php

Gracias. Daniela
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 08:31.