Bootstrap Multilevel Menu

menu.html

<nav id="main-menu" class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Item Menu 1</a></li>
                    <li class="parent active">
                        <a href="#">Item Menu 2</a>
                        <ul>
                            <li class="parent">
                                <a href="#">Item menu 1</a>
                                <ul>
                                    <li><a href="#">Item Menu</a></li>
                                    <li><a href="#">Item Menu</a></li>
                                    <li><a href="#">Item Menu</a></li>
                                    <li><a href="#">Item Menu</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Item menu 2</a></li>
                            <li class="parent">
                                <a href="#">Item menu 3</a>
                                <ul>
                                    <li><a href="#">Item Menu</a></li>
                                    <li><a href="#">Item Menu</a></li>
                                    <li><a href="#">Item Menu</a></li>
                                    <li><a href="#">Item Menu</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Item menu 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Item Menu 3</a></li>
                    <li><a href="#">Item Menu 4</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

menu.styl

#main-menu
    background-color: #000;
    min-height: 45px;
    margin-bottom 0
    .navbar-collapse
        padding: 0;
    .nav
        width 100%
        position: relative;
        li
            &.active
                a
                    background-color: #c4c4c4c
            &.parent
                position: relative;
                > a
                    &::after
                        content: "\e900";
                        font-family: 'icomoon';
                        position: absolute;
                        color: #fff;
                        font-size: 6px;
                        top: 12px;
                        right: 13px;
                        transform-origin: center;
                    &:hover
                        &::after
                            transform: rotate(180deg);
                .parent
                    > ul
                        position: absolute;
                        left: 100%;
                        top: 0;
                        a
                            background-color: #c2c2c2;
                    a
                        &::after
                            top: 18px;
                > ul
                    display: none;
                    background-color: #000;
                    list-style: none;
                    position: absolute;
                    padding-left 0;
                    width 100%
                    > li
                        max-height: 44px;
                        width 100%;
                        > a
                            font-size: 14px;
                            text-transform: none;
                            padding: 12px 20px;
                            width: 100%;
                            display: block;
                > a
                    padding: 12px 35px 12px 15px;
                    &:hover
                        background-color: #c4c4c4;
                        + ul
                            display: block;
                ul
                    &:hover
                        display: block;
        a
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            padding: 12px 25px;
            &:hover
                background-color: #c2c2c2;

for adaptive use https://mmenu.frebsite.nl/