/* el menú en si mismo */
  .mi-menu  {
   /* border-radius: 5px;
    list-style-type: none;*/
     /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 50px; 
    width: 100%;
	/*margin-bottom:0px;*/
	margin-top:0px;
    /* el color de fondo */
    background: #555;
  
  }

  /* cada item del menu */
  .mi-menu  li {
   /* display: block;*/
    float: left; /* la lista se ve horizontal */
    height: 30px;
    list-style: none;
 
    position: relative;
  }
  .mi-menu li a {
   border-left:  1px solid #666;
   /* border-right: 1px solid #666;*/
   color: #FFFFFF;
   display: block;
   font-family: 'Raleway', sans-serif;
   font-size: 16px;
  
   padding: 0 20px;
   margin: 5px;
   margin-top:15px;
   margin-bottom::0px;
   text-decoration: none;
 
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none;
   }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { 
  color:#FFFFFF;
  font-size:16px;
  font-weight: bold;
   }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 0 0;
    left: 0;
    margin: 0 0 0 0;
    opacity: 0; /* no son visibles */
    position: absolute;
	font-size: 14px;
	top: 50px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #444;
  
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { 
  opacity: 1;
  font-size:14px;
   }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 20px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }

  .mi-menu ul li:hover > a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
	 font-weight: bold;
    /* el ancho dependerá de los textos a utilizar */

    width: 40px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }








/******************************************************************