.menu {
    font-family: Georgia, serif;
    font-size: 18px;
    width: 100%;
    height: 10px;
    display: flex;
    perspective: 200px;
}

.menu ul {
    display: flex;
    margin: auto;
}

.menu li {
    list-style: none;
    padding: 15px 50px;
}

.menu li:hover {
    background: rgba(0, 0, 0, 0.3);
    color: rgb(209, 209, 209);
    cursor: none;
    transition: all 300 ms;
}

.menu ul li ul {
    *display: none;
    flex-direction: column;
    position: absolute;
    background: rgb(209, 209, 208);
    margin-top: 15px;
    transform: rotateY(240deg) scale(0);
    transition: all 1s;
    box-shadow: 1px 1px 10px 0px black;
}

.menu ul li:hover>ul {
    transform: rotateY(0deg) scale(1);
    transition: all 1s;
}

.menu ul li ul::before {
    *content: "";
    width: 10;
    height: 10;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 30px solid rgb(209, 209, 208);
    position: absolute;
    margin-top: 10px;
    margin-left: 90px;
}

.menu ul li ul li ul li {
    position: relative;
}

.menu ul li ul li ul {
    right: -90px;
    top: 36px;
    background: color #9f67a1;
}

.menu ul li ul li ul:before {
    position: absolute;
    margin-top: 20px;
    margin-left: -10px;
    border-bottom: 8px solid coral;
    transform: rotateY(-90deg);
}