搜索和滚动条下拉子菜单Bootstrap

Question

I have some problem here. Please help me and thanks in advanced. Here the jsfiddle . Questions:

1. I have search box in my dropdown menu and I also have multiple sub-menu. But the search box only filter on the first dropdown, the sub-menu can't work. So, how to make the search box can filter the sub-menu and show their parent like this picture?

2. How to make my dropdown menu have scroll bar? I have add overflow: auto in CSS, but my dropdown submenu become invisible like this picture.

3. How to make the dropdown submenu always on top? Same the top like its parents. Thank you very much. I'm using bootstrap 3.3.5.

HTML file

<nav class="navbar navbar-default navbar-fixed-top">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
<span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
            </button> <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">First<span class="sr-only">(current)</span></a>

                </li>
                <li><a href="#">Second</a>

                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>

                    <ul id="main-menu" class="dropdown-menu">
                        <li class=" row search-box">
                            <div class="col-sm-10">
                                <input class="form-control search" id="search-criteria" type="text" placeholder="Search" />
                            </div>
                        </li>
                        <li><a class="menu" href="#">Contact Us</a>
                        </li>
                        <li><a class="menu" href="#">Portfolio</a>
                        </li>
                        <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">First Level</a>
                            <ul class="dropdown-menu">
                                <li><a class="menu" href="#">Second Level</a>
                                </li>
                                <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Second Dropdown</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Third Dropdown</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="menu" href="#">Action</a>
                                                </li>
                                                <li><a class="menu" href="#">Another action</a>
                                                </li>
                                                <li><a class="menu" href="#">Something else here</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li><a class="menu" href="#">Separated link</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li><a class="menu" href="#">One more separated link</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Another Dropdown</a>

                            <ul class="dropdown-menu">
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Level 2</a>

                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Level 3</a>

                                            <ul class="dropdown-menu">
                                                <li><a class="menu" href="#">One</a>
                                                </li>
                                                <li><a class="menu" href="#">Two</a>
                                                </li>
                                                <li><a class="menu" href="#">Three</a>
                                                </li>
                                                <li><a class="menu" href="#">Four</a>
                                                </li>
                                                <li><a class="menu" href="#">Five</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                                <li><a class="menu" href="#">Home</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">List</a>
                            <ul class="dropdown-menu">
                                <li><a class="menu" href="#">Action</a>
                                </li>
                                <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Menu</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Stationary</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="menu" href="#">Book</a>
                                                </li>
                                                <li><a class="menu" href="#">Pen</a>
                                                </li>
                                                <li><a class="menu" href="#">Pencil</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li><a class="menu" href="#">Ruler</a>


                                     </li>
                                            <li><a class="menu" href="#">Paper</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li role="separator" class="divider"></li>
                    <li><a class="menu" href="#">Address</a>
                    </li>
                    <li role="separator" class="divider"></li>
                    <li><a class="menu" href="#">Another Project Collaboration</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</nav>

CSS file

body {
    padding-top: 50px;
}
.search-box {
    margin: 5px 0px;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>a:after {
    display: block;
    content:" ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

JS file

$("#search-criteria").on("keyup", function () {
    var g = $(this).val().toLowerCase();
    $(".menu").each(function () {
        var s = $(this).text().toLowerCase();
        $(this).closest('.menu')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
    });
});

Answer 1

you can try this one :

body {
    padding-top: 50px;
}
.search-box {
    margin: 5px 0px;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>a:after {
    display: block;
    content:" ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
#wrapper .dropdown-submenu{
    width: 200px;
    height: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;


}

#container{
    width: 300px;
    transform: translate(50px, 0);

}

DEMO FIDDLE