How can I do multi level dropdown menu in bootstrap ?

Question

I am working on MVC 5, there is Multi level dropdown.

 

I have tried below code,

 

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet" />
<style type="text/css">
    .multiselect-container {
        width: 100% !important;
    }

    .dropdown-submenu {
        position: relative;
    }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }
</style>
<div class="col-xs-6 col-sm-6 col-md-6" style="" id="divProductDL">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Select Product Categories <span class="requireValidate">*</span></label>


                                                <div class="dropdown">
                                                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                                        Please select Product
                                                        <span class="caret"></span>
                                                    </button>

                                                    <ul class="dropdown-menu">
                                                                <li class="dropdown-submenu">
                                                                    <input type="checkbox" name="productcat"><a class="test" tabindex="-1" href="#">Construction Products<span class="caret"></span></a>
                                                                        <ul class="dropdown-menu" style="display: block;">

                                                                           <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Cement</a></li>
                                                                        </ul>
                                                                        <ul class="dropdown-menu">

                                                                           <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Steel</a></li>
                                                                        </ul>
                                                                </li>
                                                                <li class="dropdown-submenu">
                                                                    <input type="checkbox" name="productcat"><a class="test" tabindex="-1" href="#">Electrical Products<span class="caret"></span></a>
                                                                        <ul class="dropdown-menu">

                                                                           <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Cables</a></li>
                                                                        </ul>
                                                                        <ul class="dropdown-menu">

                                                                           <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Fans</a></li>
                                                                        </ul>
                                                                </li>
                                                                <li class="dropdown-submenu">
                                                                    <input type="checkbox" name="productcat"><a class="test" tabindex="-1" href="#">Plumbing Products<span class="caret"></span></a>
                                                                        <ul class="dropdown-menu">

                                                                           <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Accessories</a></li>
                                                                        </ul>
                                                                        <ul class="dropdown-menu">

                                                                           <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Taps</a></li>
                                                                        </ul>
                                                                        <ul class="dropdown-menu">

                                                                           <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Pipes</a></li>
                                                                        </ul>
                                                                </li>
                                                                <li class="dropdown-submenu">
                                                                    <input type="checkbox" name="productcat"><a class="test" tabindex="-1" href="#">Finishing Products<span class="caret"></span></a>
                                                                        <ul class="dropdown-menu">

                                                                           <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Floor Tiles</a></li>
                                                                        </ul>
                                                                        <ul class="dropdown-menu">

                                                                           <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Wall Tiles</a></li>
                                                                        </ul>
                                                                </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
<script type="text/javascript">
    $(document).ready(function () {

        $('a.test').on("click", function (e) {

            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();
        });
    });
</script>

 But not working. how can I do this? please help me...