/* el menú en si mismo */

  .mi-menu  

  {

    float:left;

    margin: 10px 0px 0; /* si queremos centrarlo */

    padding: 0;

    /* la altura y su ancho dependerán de los textos */

    text-align:left;

  }

/*.mi-menu >li {width:250px;}*/

/*.mi-menu >li a{width:140px;}*/

  /* cada item del menu */

  .mi-menu  li:first-child {list-style:none; margin:0;}

  .mi-menu  li {

    float: left; /* la lista se ve horizontal */

    list-style-type:none;

    color:#40bfae;

    margin: 0 0 0 4px;

    padding:5px 8px 10px 0;

    position: relative;

    cursor:pointer;

  }

  

  .mi-menu li a {

    padding: 0 0 0 0;

    margin: 6px 8px 4px 0;

    text-decoration: none;

    /* animamos el cambio de color de los textos */

    -webkit-transition: color .2s ease-in-out;

    -moz-transition: color .2s ease-in-out;

    -o-transition: color .2s ease-in-out;

    -ms-transition: color .2s ease-in-out;

    transition: color .2s ease-in-out;

    color:#FFF;

  }

  /* eliminamos los bordes del primer y el último */

  .mi-menu li:first-child a { border-left: none; }

  /* efecto hover cambia el color */

  .mi-menu li:hover > a {}



  /* los submenús */

  .mi-menu ul {

    left: 0;

    margin: 0;

    opacity: 0; /* no son visibles */

    position: absolute;

    top: 28px; /* se ubican debajo del enlace principal */

    /* el color de fondo */

    background: #1eab97;

    color:#fff;

    font-size:12px;

    -moz-transition: opacity .25s ease .1s;

    -webkit-transition: opacity .25s ease .1s;

    -o-transition: opacity .25s ease .1s;

    -ms-transition: opacity .25s ease .1s;

    transition: opacity .25s ease .1s;

    width:100%;

  }

  /* son visibes al poner el cursor encima */

  .mi-menu li:hover > ul { opacity: 1; z-index:101; list-style-type:square; width: 250px;}



   /* 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;

    

    vertical-align:middle;

    font-size:12px;

    font-weight:bold;

    list-style-type:square;

    list-style-position:inside;

  }

  .mi-menu li:hover > ul li {

    height: 20px; /* los mostramos */

    overflow: visible;

    width:100%;

    list-style-type:square;

    list-style-position:inside;

    margin-left:3px;

  }

  .mi-menu ul li a {

    margin: 0;

    /* el ancho dependerá de los textos a utilizar */

    padding: 0px 3px;

    cursor:pointer;

    text-transform:none;

    /*display:block;*/

  }

  .mi-menu ul li:hover

  {

     /* background-color:#FFF;

      color:#000;      */

  }

  .mi-menu ul li:hover > a

  {

      /*  color:#000;*/

  }

  /* el último n otiene un borde */

  .mi-menu ul li:last-child {border:none;}

  .mi-menu ul li:last-child a { border: none; }