How to create a sub submenu using bootstrap megamenu

Question

Does anyone know how to create a sub-menu with megamenus? Thank you

        .navbar-default {
            color: #fff;
            background-color: #39b3d7;
            border-color: #269abc;
        }
        
        .navbar-default .navbar-nav > li > a {
            color: #fff;
        }
        
        .navbar-default .navbar-nav > .dropdown > a .caret {
            border-top-color: #fff;
            border-bottom-color: #fff;
        }
        
        .navbar-default .navbar-brand {
            color: #fff;
        }
        
        .menu-large {
            position: static !important;
        }
        
        .megamenu {
            padding: 20px 0px;
            width: 100%;
        }
        
        .megamenu> li > ul {
            padding: 0;
            margin: 0;
        }
        
        .megamenu> li > ul > li {
            list-style: none;
        }
        
        .megamenu> li > ul > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.428571429;
            color: #333333;
            white-space: normal;
        }
        
        .megamenu> li ul > li > a:hover,
        .megamenu> li ul > li > a:focus {
            text-decoration: none;
            color: #262626;
            background-color: #f5f5f5;
        }
        
        .megamenu.disabled > a,
        .megamenu.disabled > a:hover,
        .megamenu.disabled > a:focus {
            color: #999999;
        }
        
        .megamenu.disabled > a:hover,
        .megamenu.disabled > a:focus {
            text-decoration: none;
            background-color: transparent;
            background-image: none;
            filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
            cursor: not-allowed;
        }
        
        .megamenu.dropdown-header {
            color: #428bca;
            font-size: 18px;
        }
        
        @media (max-width: 768px) {
            .megamenu {
                margin-left: 0;
                margin-right: 0;
            }
            .megamenu> li {
                margin-bottom: 30px;
            }
            .megamenu> li:last-child {
                margin-bottom: 0;
            }
            .megamenu.dropdown-header {
                padding: 3px 15px !important;
            }
            .navbar-nav .open .dropdown-menu .dropdown-header {
                color: #fff;
            }
        }

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li class="dropdown menu-large">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <b class="caret"></b> </a>
                        <ul class="dropdown-menu megamenu row">
                            <li>
                                <div class="col-sm-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <img src="img/a.png" />
                                    </a>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <img src="img/b.png" />
                                    </a>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <img src="img/c.png" />
                                    </a>
                                </div>
                                
                                <!-- problema aqui -->
                                <li class="dropdown menu-large">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                                        <div class="col-sm-6 col-md-3">
                                            <a href="#" class="thumbnail">
                                                <img src="img/d.png" />
                                            </a>
                                        </div>

                                        <b class="caret"></b> </a>

                                        <ul class="dropdown-submenu megamenu row">
                                        <li>
                                            <div class="col-sm-6 col-md-3">
                                                <a href="#" class="thumbnail">
                                                    <img src="img/d1.png" />
                                                </a>
                                            </div>
                                            <div class="col-sm-6 col-md-3">
                                                <a href="#" class="thumbnail">
                                                    <img src="img/d2.png" />
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <!-- problema aqui -->

                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

Answer 1

For design reasons, it makes no sense to submenu a mega-menu.

Then take a look in this example.