Tema: Menu desplegable por debajo de formulario
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/02/2014, 12:45
RaulCDT
 
Fecha de Ingreso: febrero-2014
Ubicación: Murcia
Mensajes: 119
Antigüedad: 10 años, 9 meses
Puntos: 0
Menu desplegable por debajo de formulario
He puesto un código de formulario que he descargado y ahora cuando le doy al menu que es desplegable, se me ven las opciones por debajo del formulario, es decir , como si el formulario estuviese delante y el desplegable el fondo cuando se despliega...

el código del formulario

Código CSS: 
Ver original
  1. /* === Remove input autofocus webkit === */
  2. *:focus {
  3.     outline: none;
  4. }
  5.  
  6. /* === Form Typography === */
  7.  
  8.  
  9. .contact_form h2, .contact_form label {
  10.  
  11.     font-size: 9pt;font-weight: bold;margin: 0px; font-family: Arial; letter-spacing: -0.08em; display: block;font-family: Arial, Helvetica;
  12. }
  13.  
  14. .form_hint, .required_notification {
  15.     font-size: 11px;
  16. }
  17.  
  18. /* === List Styles === */
  19. .contact_form ul {
  20.     width: 670px;
  21.     list-style-type: none;
  22.     list-style-position: outside;
  23.     margin: 0px;
  24.     padding: 0px;
  25. }
  26.  
  27. .contact_form li {
  28.     padding: 9px;
  29.     border-bottom: 1px solid #eee;
  30.     position: relative;
  31. }
  32.  
  33.  
  34.  
  35. /* === Form Header === */
  36. .contact_form h2 {
  37.     margin: 0;
  38.     display: inline;
  39. }
  40.  
  41. .required_notification {
  42.     color: #d45252;
  43.     margin: 5px 0 0 0;
  44.     display: inline;
  45.     float: right;
  46. }
  47.  
  48. /* === Form Elements === */
  49. .contact_form label {
  50.     width: 150px;
  51.     margin-top: 3px;
  52.     display: inline-block;
  53.     float: left;
  54.     padding: 3px;
  55. }
  56.  
  57. .contact_form input {
  58.     height: 20px;
  59.     width: 220px;
  60.     padding: 5px 8px;
  61. }
  62.  
  63. .contact_form textarea {
  64.     padding: 8px;
  65.     width: 300px;
  66. }
  67.  
  68. .contact_form button {
  69.     margin-left: 156px;
  70. }
  71.  
  72. /* form element visual styles */
  73. .contact_form input, .contact_form textarea {
  74.     border: 1px solid #aaa;
  75.     box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
  76.     border-radius: 2px;
  77.     padding-right: 30px;
  78.     -moz-transition: padding .25s;
  79.     -webkit-transition: padding .25s;
  80.     -o-transition: padding .25s;
  81.     transition: padding .25s;
  82. }
  83.  
  84.     .contact_form input:focus, .contact_form textarea:focus {
  85.         background: #fff;
  86.         border: 1px solid #555;
  87.         box-shadow: 0 0 3px #aaa;
  88.         padding-right: 70px;
  89.     }
  90.  
  91.     /* === HTML5 validation styles === */
  92.     .contact_form input:required, .contact_form textarea:required {
  93.         background: #fff url(../img/asterisco.png) no-repeat 98% center;
  94.     }
  95.  
  96.         .contact_form input:required:valid, .contact_form textarea:required:valid {
  97.             background: #fff url(../img/tick.png) no-repeat 98% center;
  98.             box-shadow: 0 0 5px #5cd053;
  99.             border-color: #28921f;
  100.         }
  101.  
  102.     .contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
  103.         background: #fff url(../img/invalid.png) no-repeat 98% center;
  104.         box-shadow: 0 0 5px #d45252;
  105.         border-color: #b03535;
  106.     }
  107.  
  108. /* === Form hints === */
  109. .form_hint {
  110.     background: #d45252;
  111.     border-radius: 3px 3px 3px 3px;
  112.     color: white;
  113.     margin-left: 8px;
  114.     padding: 1px 6px;
  115.     z-index: 999; /* hints stay above all other elements */
  116.     position: absolute; /* allows proper formatting if hint is two lines */
  117.     display: none;
  118. }
  119.  
  120.     .form_hint::before {
  121.         content: "\25C0";
  122.         color: #d45252;
  123.         position: absolute;
  124.         top: 1px;
  125.         left: -6px;
  126.     }
  127.  
  128. .contact_form input:focus + .form_hint {
  129.     display: inline;
  130. }
  131.  
  132. .contact_form input:required:valid + .form_hint {
  133.     background: #28921f;
  134. }
  135.  
  136.     .contact_form input:required:valid + .form_hint::before {
  137.         color: #28921f;
  138.     }