﻿
      body {font: 72.5%/1.2 Arial, Helvetica, sans-serif; background-color: #eee; }
        h2 {margin:80px;}

        Caja contenedora   
        #wrap {font-size: 1.8em; width: 380px; padding: 20px;
                margin: 360px  auto; /*Da lugar al centrado de la caja en el elemento superior body*/
                background-color: #fff;}

        /* Estilos que crean el menú desplegable */
        /*Eliminamos padding y margin que introducen navegadores por defecto en listas*/
        #menuh { padding:0; margin:20px; }

        /*Elementos items principales de menú que se muestran siempre*/
        #menuh li { list-style: none; float: left; margin:1px;}
   
        #menuh li a {
           display: block; /* Usamos display block para poder aplicar propiedades de caja a links */
           padding: 3px 20px; background-color: #76193B; color: #fff;
           text-align:center;
           text-decoration: none; }

        /*Listas de subitems de menú*/   
        #menuh li ul {
           display: none; /*La lista inicialmente no se muestra debido a display:none; */
           background-color: #76193B;}
   
        #menuh li:hover ul {
           font-size: 12px;
           display: block; /*Al situar el cursor sobre el item la lista de subitems pasa de display none a display block y se muestra*/
           position:static; /*Al desplegarse el submenú no ocupa espacio y no desplaza a otros elementos gracias a que establecemos position absolute*/
           margin: 2px; padding: 0; /*Anulamos margin y padding que por defecto introducen navegadores*/
           }
        /*Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratón sobre un item de menú*/   
        #menuh li a:hover { background-color: #7c7c7c; }


        #menuh li:hover li { float: none; } /*Anulamos el float left que define el elemento padre para que los subitems se muestren en vertical */
   
        /*Creamos la apariencia de los subitems de menú, color de fondo, borde inferior, color de texto*/
        #menuh li:hover li a { background-color: #76193B; border-bottom: 1px solid #fff; color: #FFF; }

        /*Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratón sobre un subitem de menú*/   
        #menuh li li a:hover { background-color: #7c7c7c; }

