Tema: Submenú despliegue lento con css3
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 05/03/2012, 15:01
Avatar de xFantaSx
xFantaSx
 
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 13 años, 3 meses
Puntos: 20
Respuesta: Submenú despliegue lento con css3
Dime si este es el efecto que deseas.

Código HTML: 
Ver original
  1. <html lang="es">
  2. <head>
  3.     <meta charset="utf8" />
  4.     <title>Mi web</title>
  5.     <style type="text/css">
  6.     <!--
  7. * {padding:0; margin:0; border:0;}
  8. //p
  9. {
  10.     padding: 5px 250px;
  11.     margin: 10px;
  12.     background: #ff0030;
  13.     color: #fff;
  14.     font-size: 15px;
  15.     line-height: 1.3em;
  16.     border: 2px dashed #fff;
  17.     border-radius: 3px;
  18.     -moz-border-radius: 3px;
  19.     -webkit-border-radius: 3px;
  20.     -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  21.     -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  22.     box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
  23.     text-shadow: -1px -1px #aa3030;
  24. }
  25. #contenedor
  26. {
  27.     overflow:hidden;
  28.     margin:10px auto 0px;
  29.     width:900px;
  30.     background:pink;
  31. }
  32.  
  33. .menu li 
  34. {
  35.     margin:10px;
  36.     float:left;
  37.     padding:10px;
  38.     display:block;
  39.     background:black;
  40.     width:200px;
  41. }
  42. .menu
  43. {
  44.     height:100px;
  45. }
  46. .menu li:hover
  47. {
  48.     background:red;
  49.         -moz-transition: background 0.6s;
  50.         -moz-transition: background 0.6s;
  51.         -ms-transition: background 0.6s;
  52.         -o-transition: background 0.6s;
  53.         -webkit-transition: background 0.6s;
  54.         transition: background 0.6s;
  55. }
  56. .menu ul li ul
  57. {
  58.     /*display:none; /*Oculta submenu*/
  59.     //background:#cac99e;
  60.     position:absolute;
  61.     //padding:5px;
  62.     margin:10px -20px; /*Pocicion*/
  63.     .margin:69px -170px; /* hack pa ir */
  64.     _margin:69px -170px;
  65.     height:0px;
  66.     visibility: hidden;
  67. }
  68.  
  69. .menu ul li:hover ul
  70. {   
  71.     /*display:block;*/
  72.     height:250px;
  73.     visibility: visible;
  74.     overflow: hidden;
  75.     color:red;
  76.     -moz-transition: 0.4s;
  77.     -ms-transition: 0.5s;
  78.     -o-transition: 0.5s;
  79.     -webkit-transition: 0.5s;
  80.     transition:0.5s;
  81. }
  82. .menu ul li ul li
  83. {
  84.     margin:0px;
  85.     left:10px;
  86.     display:block;
  87.     float:none;
  88.     position:relative;
  89.     color:#fff;
  90.     //padding:0px;
  91.     line-height:30px;
  92.     background-color:black;
  93.  
  94. }
  95. .menu ul li ul li:hover
  96. {   
  97.     background-color:red;
  98.     -moz-transition: 0.4s;
  99.     -ms-transition: 0.5s;
  100.     -o-transition: 0.5s;
  101.     -webkit-transition: 0.5s;
  102.     transition:0.5s;
  103. }
  104.  
  105. .menu a
  106. {
  107.     text-decoration:none;
  108. }
  109.  
  110.  
  111. -->
  112.     </style>
  113. </head>
  114. <body>
  115.  
  116. <div id="banner">s</div>
  117. <div id="contenedor">
  118.  
  119.     <div class="menu">
  120.             <ul>
  121.                 <a href="#">
  122.                 <li>Sobre...</li></a>
  123.                 <li>Navegarsdfsadf
  124.                     <ul>
  125.                         <a href="#"><li>LINK DINAMICOS</li></a>
  126.                         <a href="#"><li>LINK DINAMICOS</li></a>
  127.                         <a href="#"><li>LINK DINAMICOS</li></a>
  128.                         <a href="#"><li>LINK DINAMICOS</li></a>
  129.                         <a href="#"><li>LINK DINAMICOS</li></a>
  130.                     </ul>
  131.                 </li>
  132.             </ul>
  133.             <ul>
  134.                 <li><a href="#">Contacto</a></li>
  135.             </ul>
  136.     </div>
  137.  
  138.     <div id="contenido"> <!-- CONTENIDO -->
  139.         <p>HOla</p>
  140.  
  141.     </div> <!-- END CONTENIDO -->
  142.  
  143. </div> <!-- END CONTENEDOR -->
  144.  
  145. </body>
  146. </html>
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?