Foros del Web » Creando para Internet » CSS »

Menu dropdown: antes del cursor se cierran submenues

 Estas en el tema de Menu dropdown: antes del cursor se cierran submenues en el foro de CSS en Foros del Web. es un menu CSS dropdown que todo funcona OK en ie9 (MODO COMPATIBILIDAD) tambien funciona sin problemas despues que le quite todos los margin y ...
  #1 (permalink)  
Antiguo 21/03/2011, 13:38
 
Fecha de Ingreso: junio-2010
Mensajes: 27
Antigüedad: 14 años, 6 meses
Puntos: 0
Menu dropdown: antes del cursor se cierran submenues
es un menu CSS dropdown que todo funcona OK en ie9 (MODO COMPATIBILIDAD) tambien funciona sin problemas despues que le quite todos los margin y padding (los puse a 0), porque al posar el mouse sobre el menu se abrian los submenues, pero al querer pasar a cada submenu estos se cerraban antes que el cursor se posara sobre ellos....

O sea, lo solucione en IE .... PEEERO esto no dio resultado en ninguno de los browsers W3 compliant (Ni en Opera, Ni en safari ni en Chrome ni en FF).

Pido ayuda ya cansado de buscar el error, porque he comparado las declaraciones mil veces y no encuentro nada raro, pero el menu funcona mal en esos navegadores...

Código CSS: 
Ver original
  1. <STYLE type="text/css">
  2. ul.dapym ul{display:none}
  3. ul.dapym li:hover>ul{display:block}
  4. ul.dapym ul{position: absolute;left:-1px;top:98&#37;;}
  5. ul.dapym ul ul{position: absolute;left:98%;top:-2px;}
  6. ul.dapym,ul.dapym ul {
  7.     margin:0px;
  8.     list-style:none;
  9.     padding:0px 0px 0px 0px;
  10.     background-color:#dadada;
  11.     background-repeat:repeat;
  12.     border:1px solid #F0D52D;
  13. }
  14. ul.dapym table {border-collapse:collapse}ul.dapym {
  15.     display:block;
  16.     zoom:1;
  17.     float: left;    
  18. }
  19. ul.dapym ul{
  20.     width:auto;
  21. }
  22. ul.dapym li{
  23.     display:block;
  24.     margin:0 0 0 0px;
  25.     font-size:0px;
  26. }
  27. ul.dapym a:active, ul.dapym a:focus {
  28. outline-style:none;
  29. }
  30. ul.dapym a, ul.dapym li.dis a:hover, ul.dapym li.sep a:hover {
  31.     display:block;
  32.     vertical-align:middle;
  33.     background-color:#3C2420;
  34.     border-width:1px;
  35.     border-color:#D1A24F;
  36.     border-style:solid;
  37.     text-align: center;
  38.     text-decoration:none;
  39.     padding:0px;
  40.     _padding-left:0;
  41.     font:bold 10px Verdana;
  42.     color: #ffffff;
  43.     text-decoration:none;
  44.     cursor:default;
  45. }
  46. ul.dapym span{
  47.     overflow:hidden;
  48. }
  49. ul.dapym li {
  50.     float:left;
  51. }
  52. ul.dapym ul li {
  53.     float:none;
  54. }
  55.  
  56. ul.dapym ul a {
  57.     text-align:left;
  58.     white-space:nowrap;
  59. }
  60. ul.dapym li.sep{
  61.     text-align:center;
  62.     padding:0px;
  63.     line-height:0;
  64.     height:100%;
  65. }
  66. ul.dapym li.sep span{
  67.     float:none; padding-right:0;
  68.     width:5;
  69.     height:16;
  70.     display:inline-block;
  71.     background-color:#EEEEEE #777777 #666666 #C9C9C9;   background-image:none;}
  72.     
  73.     ul.dapym ul li.sep span{
  74.     width:80%;
  75.     height:3;
  76. }
  77.     
  78. ul.dapym li:hover{
  79.     position:relative;
  80. }
  81. ul.dapym li:hover>a{
  82.     background-color:#DDC426;
  83.     border: 1px solid #FFF675;
  84.     font:bold 10px Verdana;
  85.     color: #000000;
  86.     text-decoration:none;
  87. }
  88. ul.dapym li a:hover{
  89.     position:relative;
  90.     background-color:#DDC426;
  91.     border: 1px solid #FFF675;
  92.     font:bold 10px Verdana;
  93.     color: #000000;
  94.     text-decoration:none;
  95. }
  96. ul.dapym li.dis a {
  97.     color: #000000 !important;
  98. }
  99. ul.dapym img {border: none;float:left;_float:none;margin-right:4px;width:16px;
  100. height:16px;
  101. }
  102. ul.dapym ul img {width:16px;
  103. height:16px;
  104. }
  105. ul.dapym img.over{display:none}
  106. ul.dapym li.dis a:hover img.over{display:none !important}
  107. ul.dapym li.dis a:hover img.def {display:inline !important}
  108. ul.dapym li:hover > a img.def  {display:none}
  109. ul.dapym li:hover > a img.over {display:inline}
  110. ul.dapym a:hover img.over,ul.dapym a:hover ul img.def,ul.dapym a:hover a:hover ul img.def,ul.dapym a:hover a:hover a:hover ul img.def,ul.dapym a:hover a:hover img.over,ul.dapym a:hover a:hover a:hover img.over,ul.dapym a:hover a:hover a:hover a:hover img.over{display:inline}
  111. ul.dapym a:hover img.def,ul.dapym a:hover ul img.over,ul.dapym a:hover a:hover ul img.over,ul.dapym a:hover a:hover a:hover ul img.over,ul.dapym a:hover a:hover img.def,ul.dapym a:hover a:hover a:hover img.def,ul.dapym a:hover a:hover a:hover a:hover img.def{display:none}
  112. ul.dapym a:hover ul,ul.dapym a:hover a:hover ul,ul.dapym a:hover a:hover a:hover ul{display:block}
  113. ul.dapym a:hover ul ul,ul.dapym a:hover a:hover ul ul{display:none}
  114. ul.dapym span{
  115.     display:block;
  116.     background-image:url(/images/arrow_sub1.gif);
  117.     background-position:right center;
  118.     background-repeat: no-repeat;
  119.    padding-right:12px;}
  120. ul.dapym li:hover>a>span{   background-image:url(/images/arrv_anim_1o.gif);
  121. }
  122. ul.dapym a:hover span{  _background-image:url(/images/arrv_anim_1o.gif)}
  123. ul.dapym ul span,ul.dapym a:hover table span{background-image:url(/images/arr_double_1.gif)}
  124. ul.dapym ul li:hover > a span{  background-image:url(/images/arr_double_1o.gif);}
  125. ul.dapym table a:hover span,ul.dapym table a:hover a:hover span,ul.dapym table a:hover a:hover a:hover span{background-image:url(/images/arr_double_1o.gif)}
  126. ul.dapym table a:hover table span,ul.dapym table a:hover a:hover table span{background-image:url(/images/arr_double_1.gif)}
  127. </style>

Código HTML: 
Ver original
  1. <ul class="dapym dapymm">
  2.     <li class="dapymi"><a class="dapymi" href="index.html" target="_self" title="TEXTOTEXTOTEXTO">Página Principal</a></li>
  3.     <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO"><span>LINKLINK</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
  4.     <ul class="dapymm">
  5.         <li class="dapymi"><a class="dapymi" href="NOMBRE.html" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  6.     </ul>
  7.     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  8.     <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO"><span>LINKLINK</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
  9.     <ul class="dapymm">
  10.         <li class="dapymi"><a class="dapymi" href="NOMBRE1.html" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  11.         <li class="dapymi"><a class="dapymi" href="NOMBRE2.html" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  12.     </ul>
  13.     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  14.     <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO"><span>LINKLINK</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
  15.     <ul class="dapymm">
  16.         <li class="dapymi"><a class="dapymi" href="NOMBRE4.html" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK<br />en el Palacio</a></li>
  17.     </ul>
  18.     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  19.     <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO"><span>LINKLINK</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
  20.     <ul class="dapymm">
  21.         <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  22.         <li class="dapymi"><a class="dapymi" href="NOMBRE5.html" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  23.     </ul>
  24.     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  25.     <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO"><span>LINKLINK</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
  26.     <ul class="dapymm">
  27.         <li class="dapymi"><a class="dapymi" href="NOMBRE6.html" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  28.         <li class="dapymi"><a class="dapymi" href="#" target="_self" title="EN CONSTRUCCION">LINKLINK</a></li>
  29.         <li class="dapymi"><a class="dapymi" href="#" target="_self" title="EN CONSTRUCCION">LINKLINK</a></li>
  30.     </ul>
  31.     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  32.     <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO"><span>LINKLINK</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
  33.     <ul class="dapymm">
  34.         <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  35.         <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  36.     </ul>
  37.     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  38.     <li class="dapymi"><a class="dapymi" href="#" target="_self" title="TEXTOTEXTOTEXTO"><span>LINKLINK</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
  39.     <ul class="dapymm">
  40.         <li class="dapymi"><a class="dapymi" href="NOMBRE7" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  41.         <li class="dapymi"><a class="dapymi" href="NOMBRE8.html" target="_self" title="TEXTOTEXTOTEXTO">LINKLINK</a></li>
  42.     </ul>
  43.     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  44.     <li class="dapymi"><a class="dapymi" href="mailto:[email protected]?subject=Consulta" target="_blank" title="TEXTOTEXTOTEXTO">Contacto</a></li>
  45. </ul>

Es una copia sin los links ni nombres de archivo ni titles verdaderos, solo de muestra, a ver si alguie encuentra el gato encerrado...
Gracias :)
Última edición por RickAR; 21/03/2011 a las 13:50 Razón: Agregado
  #2 (permalink)  
Antiguo 21/03/2011, 17:09
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: Menu dropdown: antes del cursor se cierran submenues
Pues con el código que ha publicado sí es perfectamente accesibles las opciones de segundo nivel.
Despliegan y permiten que el puntero se posicione sobre ellos.
En FF 3.6 y Chrome.
  #3 (permalink)  
Antiguo 21/03/2011, 20:49
 
Fecha de Ingreso: junio-2010
Mensajes: 27
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Menu dropdown: antes del cursor se cierran submenues
LO extraño es que en la pagina completa NO funciona. En cambio en este entorno de prueba sí. Y el codigo CSS y el HTML son exactamente los mismos... Excepto que aqui he reducido al minimo los padding, margenes y bordes, dejando un menu minimalista al extremo... O sea, es algo que no me sirve porque el menu pierde toda su decoracion y no es armonico con el diseño del resto.

En la pagina en desarrollo si le quito todos absolutamente los margin, padding y border entonces en FF, Opera, Chrome y Safari el cursor captura el primer subnivel pero los siguientes se cierran al llevar el mouse hacia abajo. En IE funcionan todos los niveles.

También observo, exclusivamente en FF, Chrome, Opera y Safari ( Y NO en IE donde todos los niveles funcionan sin problema), mirando con mucho detenimiento, que el segundo nivel se mantiene activo mientras el cursor se posiciona sobre el border del primer nivel y luego sobre el border del 2do. nivel. Apenas el mouse deja de hacer hover sobre el borde del segundo level, ese submenu se cierra. Como si el fondo y contenido del submenu no fueran zonas activas para el cursor...
  #4 (permalink)  
Antiguo 22/03/2011, 09:23
 
Fecha de Ingreso: junio-2010
Mensajes: 27
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Menu dropdown: antes del cursor se cierran submenues
Gracias de todos modos. No sé qué, pero después que el Opera.exe quiso entrar a la red privada y el firewall (W7) me pregunto si lo autorizaba y le di que sí, el menu comenzo a funcionar perfecto en todos los browsers en los que no funcionaba...
Tengo el site en desarrollo en local, con el IIS en la red local... Seria eso? Una cuestion de permisos de red?? Pero le di autorizacion solo a Opera, no al resto (FF, Chrome y Safari, ya que el IE siempre funciono)... Lo entiendes??

Etiquetas: cursor, dropdown
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:15.