.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }
.dropdown1{
        position:relative;
        display:block;
    }
.dropdown1-content {
    display: none;
    position:absolute;
    background-color:#f9f9f9; 
    width:500px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    padding: 12px 16px;
    z-index:-1;
}
.dropdown1:hover .dropdown1-content
{
    display:block;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

    li a {
        display: block;
            
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

        li a:hover:not(.active) {
           
            background-color: #ddd; 
        }

        li a.active {
           color: white; 
            
           background-color: cornflowerblue; 
        }