How do I put a second horizontal dropdown-submenu to the first existing dropdown-submenu?

Have I tried to N put a second horizontal submenu next to the first submenu and I can not perform successfully? I am wrong in CSS UL and LI? Do I need more CSS classes?

In the AS DELES submenu, I would like to open another submenu on the right side (Horizontally), test1, test2, test3, but I can not do it.

    

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">   

                                                                

HOME

                    

WE

                                             SOLUTIONS                                                         WHICH ARE                                THEIRS > > >                                     

Test1

                                    

Test2

                                    

Test3

                               OURS > > >                                ALL OF THEM                                                

                <li><a href="">PORTFOLIO</a></li>
                <li class="dropdown"><a href="#">COMO SERA ? <b class="caret"></b></a>
                   <ul class="dropdown-content">
                      <span class="nav-header">&emsp;ALFABETO</span>
                          <a href="#">ALPHA</a>
                          <a href="#">BETHA</a>
                          <a href="#">GAMMA</a>
                       </ul>
                </li>
                <li><a href="">CONTATO</a></li>
            </ul>
        </div>
    </nav>
</header>

        / * MAIN NAV - MAIN MENU * /         nav.navbar.bootsnav {             background: # 222533 none repeat scroll 0 0;             border: 0 none;         }

    nav.navbar.bootsnav ul.nav>li>a {
        color: #fff;            
    }

    nav.navbar.bootsnav ul.nav>li>a:hover,
    nav.navbar.bootsnav ul.nav>li>a:focus {
        color: #f00;
        background: rgba(200, 54, 54, 0.5) !important;
        font-weight: normal;
        display: block !important;
    }

    #navbar-menu {
        margin: 6px 0;
    }

    .nav.navbar-nav.menu {
        float: left; 
    }

    #navbar-submenu li{
        margin: 6px 0;
    }

    .nav.navbar-nav.submenu li:hover{
        float: left;            
    }

    .attr-nav {
        margin: 5px -10px 0 0;
    }

    .attr-nav>ul>li>a {
        color: #e74c3c;
        font-size: 20px;            
    }

    .attr-nav>ul>li>a:hover,
    .attr-nav>ul>li>a:focus {
        color: #660000;
    }

    a:hover {
         text-decoration: underline;
         color:#e74c3c;
    }

    ul {
         list-style-type: none;
    }

    li a:hover, .dropdown:hover {
        background: rgba(200, 54, 54, 0.5);
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
    }

    .dropdown {
        position: relative;
    }

    .dropdown-submenu {
        position: relative;
        left: 100%;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 0%;
        margin-top: -1px;
    }

    .dropdown-content {
        display: none;
        position: absolute;

        min-width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
        z-index: 1;

        color: #f00;
        background: rgba(200, 54, 54, 0.5) !important;
        font-weight: normal;
    }

    .dropdown-content a {
        color: #fff;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        color: #660000;
        background-color: #e74c3c;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
</style>