bootstrap

 The dropdown-submenu has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto..

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" 

But, with a little extra CSS, you can get the same functionality.

navbar submenu on hover:

css file 

.navbar-nav li:hover>ul.dropdown-menu {

    display: block;

}

.dropdown-submenu {

    position: relative;

}

.dropdown-submenu>.dropdown-menu {

    top: 0;

    left: 100%;

    margin-top: -6px;

}

/* rotate caret on hover */

.dropdown-menu>li>a:hover:after {

    text-decoration: underline;

    transform: rotate(-90deg);

}

js file

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {

    if (!$(this).next().hasClass('show')) {

        $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');

    }

    var $subMenu = $(this).next('.dropdown-menu');

    $subMenu.toggleClass('show');

    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {

        $('.dropdown-submenu .show').removeClass('show');

    });

    return false;

});

html file

    <nav class="navbar navbar-expand-md navbar-light bg-light">

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarNavDropdown">

            <ul class="navbar-nav mr-auto">

                <li class="nav-item dropdown">

                    <a class="nav-link bg-danger text-white" href="javascript:void()" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> All Category <i class="fa fa-bars" aria-hidden="true"></i> </a>

                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                        <li class="dropdown-submenu"><a class="dropdown-item " href="javascript:void()">Google <i class="fa fa-angle-right" aria-hidden="true"></i></a>

                            <ul class="dropdown-menu">

                                <li><a class="dropdown-item" href="#">Submenu</a></li>

                                <li><a class="dropdown-item" href="#">Submenu0</a></li>

                                <li class="dropdown-submenu"><a class="dropdown-item " href="#">Submenu 1 <i class="fa fa-angle-right" aria-hidden="true"></i></a>

                                    <ul class="dropdown-menu">

                                        <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>

                                        <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>

                                    </ul>

                                </li>

                                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>

                                    <ul class="dropdown-menu">

                                        <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>

                                        <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>

                                    </ul>

                                </li>

                            </ul>

                        </li>

                    </ul>

                </li>

            </ul>

        </div>

    </nav>