Tema: Optimizar efecto acordeón
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/05/2014, 19:40
Avatar de migueljo_12
migueljo_12
 
Fecha de Ingreso: mayo-2014
Ubicación: Cartagena
Mensajes: 3
Antigüedad: 10 años, 6 meses
Puntos: 0
Pregunta Optimizar efecto acordeón
Hola!
Espero que esten genial
Soy nuevo por el foro tambien lo soy en el desarrollo web.
Tengo un problemita, quiero que cuando pase el mouse por ulgunos de los elementos li estos se espandan en forma horizontal y a la vez contraer a los demas.
El problema es que se salen verticalmente de la caja.
Muchas gracias por su preciada atencion, el codigo es el siguiente.
Código HTML: 
Ver original
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4.     <title>Efecto aumentar</title>
  5.     <style type="text/css">
  6.         body
  7.         {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         nav
  12.         {
  13.             position: fixed;
  14.             top: 0;
  15.             left: 0;
  16.             width: 100%;
  17.             height: 100px;
  18.         }
  19.         ul.barra
  20.         {
  21.             width: 50%;
  22.             height: 100px;
  23.             margin: 0 auto;
  24.             padding: 0; 
  25.         }
  26.         ul.barra > li
  27.         {
  28.             display: inline-block;
  29.             margin: 0;
  30.             width: 25%;
  31.             height: 100%;
  32.             float: left;
  33.             transition: .7s;
  34.             list-style: none;
  35.         }
  36.         ul.barra > li:hover
  37.         {
  38.             width: 55%;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <nav>
  44.         <ul class="barra">
  45.             <li style="background-color: #23A38F;"></li>
  46.             <li style="background-color: #B7C11E;"></li>
  47.             <li style="background-color: #EFF1C2;"></li>
  48.             <li style="background-color: #F0563D;"></li>
  49.         </ul>
  50.     </nav>
  51. </body>
  52. </html>