ultimenu--htb-sliding.css in Ultimenu 8

Skin based on safe CSS file name: ultimenu--htb-sliding.

Sliding sample for horizontal-to-bottom orientation.

File

skins/ultimenu--htb-sliding.css

/**
 * @file
 * Skin based on safe CSS file name: ultimenu--htb-sliding.
 *
 * Sliding sample for horizontal-to-bottom orientation.
 */

/**
 * Larger medium ~ 944px
 */
@media all and (min-width: 59em) {

  #header .ultimenu--htb-sliding  .ultimenu__flyout {
    min-width: 100%;
  }

  .ultimenu--htb-sliding .ultimenu__flyout {
    background: #fff;
    border-radius: 0 0 5px 5px;
    margin: 0;
    opacity: 1;
    padding: 0;
    top: 100%;
    visibility: visible;
  }

  .ultimenu--htb-sliding .ultimenu__flyout,
  .ultimenu--htb-sliding .ultimenu__region {
    max-height: 0;
    overflow: hidden;
    -moz-transition: max-height .25s ease-out;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out;
  }

  .ultimenu--htb-sliding .ultimenu__region {
    visibility: hidden;
    padding: 30px 30px 0 30px;
    position: relative;
    -moz-transition: visibility .5s linear 0s, padding .25s ease-out, max-height .15s ease-out;
    -webkit-transition: visibility .5s linear 0s, padding .25s ease-out, max-height .15s ease-out;
    transition: visibility .5s linear 0s, padding .25s ease-out, max-height .15s ease-out;
  }

  .ultimenu--htb-sliding > li:hover .ultimenu__flyout,
  .ultimenu--htb-sliding > li:hover .ultimenu__region {
    max-height: 620px;
    overflow: visible;
    visibility: visible;
    z-index: 99;
  }

  .ultimenu--htb-sliding > li:hover .ultimenu__region {
    padding-bottom: 30px;
  }
}