.menu > ul > li {      position: relative;}
.menu ul li > ul {
    position: absolute;
    left: 0%;
    width: auto;
    top: auto;
   
    z-index: 1;    
    background: #adca69;
    min-width: 180px;
    text-align: left;
    max-height:0;
    overflow:hidden;
    -webkit-transform:perspective(400) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin:50% 0;
    -webkit-transition:350ms;
    -moz-transition:350ms;
    -o-transition:350ms;
    transition:350ms; margin-left: -50%;
}
.menu ul li > ul.submenu1 { background: #fcb54d;}
.menu ul li > ul.submenu2 { background: #fc5b4e;}
 
.menu ul li > ul.submenu4 { background: #84bed6;}
.menu ul li > ul.submenu5 { background: #c389ce;}
.menu ul li > ul.submenu6 { background: #fcb54d;}
.menu ul li > ul.submenu7 { background: #fcb54d;}
.menu ul li:hover > ul {
    left: 0;
    opacity: 1;
    visibility: visible;
    margin-top: 0;
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
}

.menu ul li > ul.lastMenu {
    left: auto;
    right: 0;
    text-align: right; margin-right: -50%;
}

.menu ul li:hover > ul.lastMenu {
    left: auto;
    right: 0;
    opacity: 1;
    visibility: visible;
    text-align: right;
}
#menu {position: relative;
    z-index: 99;}

    .menu .submenu li {  padding: 0; margin: 0; display: block;}
    
    .menu .submenu li a{ padding: 5px 10px; color: #fff; display: block; text-transform: uppercase;white-space: nowrap;}
    .menu .submenu li:hover a { background: #8373ce;;}