.nav{
     display:flex;}
.nav li{
    position: relative;
    background: #eee;
    height: 28px;
    display: inline-block;
    color: #6c1b78;
    width: 14%;
    margin: 0 0.3%;
    text-align: center;}
.nav li a{
   display:block;
    font-weight: bold;
    color: #6c1b78;
    line-height: 28px;
    text-decoration: none
;}
.nav li:hover{
    background: #6c1b78;}



.nav li:hover a{
color:#fff;
 text-decoration:none;}
.nav .subnav{
    position: absolute;
    left: 0;
    top: 100%;
    width: 99.6%;
    border: 1px solid #333;
    background: #fff;
    z-index:9999;
    transform: scaleY(0);
    visibility: hidden;
    opacity: 1;
    transition: all .5s;
    transform-origin: top;}
.nav .subnav li{
width: 100%;}
.nav .subnav li a{
color: #333;}
.nav .subnav li:hover{
background: #f5edff;}

.nav li:hover .subnav{
   opacity: 1;
   visibility: visible;
   transform: scaleY(1);}