Tema: Fallo en menu
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/11/2012, 03:48
ShuSho
 
Fecha de Ingreso: noviembre-2012
Mensajes: 2
Antigüedad: 11 años, 5 meses
Puntos: 0
Fallo en menu
Buenas, alguien sabe porque al hacer la transiccion al pasar sobre cada pestaña del menu se me descoloca y baja?

Os dejos el codigo:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>
  6.             Menu
  7.         </title>
  8.         <style type="text/css">
  9. nav {
  10.         margin-top: 50px;
  11.         box-shadow: inset 0 5px 18px rgba(0, 0, 0, 0.6);
  12.         float: left;
  13.         width: 100%;
  14.         height:200px;
  15.         background: rgba(0, 0, 0, 0.05);
  16.         margin: auto;
  17.         text-align: center;
  18.         }
  19.  
  20.         nav ul {
  21.         list-style: none;
  22.         }
  23.  
  24.         nav ul #menu{
  25.         border-top: 1px solid #ff8c00;
  26.         margin-left: 10em;
  27.         margin-right: 10em;
  28.         padding: 0;
  29.         width: 700px;
  30.         box-shadow: inset 0 10px 18px -13px #ff8c00;
  31.         border-top-right-radius: 1px;
  32.         border-top-left-radius: 1px;
  33.  
  34.         }
  35.  
  36.         nav ul li{
  37.         position: relative;
  38.         display: inline-block;
  39.         margin: 10px;
  40.         margin-top: 0;
  41.         padding: 0.8em;
  42.         width: 80px;
  43.         height: 10px;
  44.         background: #d5d5d5;
  45.         font-family: 'Gorditas', cursive;
  46.         font-weight: 300, bold; 
  47.         border-bottom-right-radius: 20px;
  48.         border-bottom-left-radius: 20px;
  49.         box-shadow: inset 0 10px 20px -11px #ff8c00;
  50.         }
  51.  
  52.         nav ul li a{
  53.         color: #444444;
  54.         text-decoration: none;
  55.         }
  56.  
  57.         nav ul li:hover{
  58.         box-shadow: 0 2px 10px #ff8c00;
  59.         background-color: #ff8c00;
  60.         height: 40px;
  61.         -webkit-transition-duration: 1s;
  62.         margin-top: 0;
  63.         }
  64.  
  65.  
  66.  
  67.         </style>
  68.     </head>
  69.     <body>
  70.         <nav>
  71.             <ul>
  72.                 <div id="menu">
  73.                     <ul>
  74.                         <li>
  75.                             <a href="#">Inicio</a>
  76.                         </li>
  77.                         <li>
  78.                             <a href="#">Item2</a>
  79.                         </li>
  80.                         <li>
  81.                             <a href="#">Item 3</a>
  82.                         </li>
  83.                         <li>
  84.                             <a href="#">Item 4</a>
  85.                         </li>
  86.                     </ul>
  87.                 </div>
  88.             </ul>
  89.         </nav>
  90.     </body>
  91. </html>


Aparte de esto, como vereis arriba tiene un borde con una sombra naranja, pero se me ve un poco mal, sabeis alguna formar de poner la sombra solo en el top, porque en los laterales se me ve algo