Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/03/2011, 13:38
RickAR
 
Fecha de Ingreso: junio-2010
Mensajes: 27
Antigüedad: 13 años, 10 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