Nested menu items overlap each other

I have a nested drop-down menu. But the items overlap each other when clicked sequentially.

Code pen here: https://codepen.io/logan-lee/pen/BaadBxg

I tried

$(document).ready(function(){
    $('.dropdown-submenu a.test').on("click", function(e){
        $('.dropdown-submenu ul').hide();     // this is a fix that doesn't work
        $(this).next('ul').toggle();                
        e.stopPropagation();
        e.preventDefault();
    });
});

But this doesn't work on nested items.

If I remove the 'fix' line, the nested items overlap each other(which is the original problem).

Thanks.

Solution

I am putting all this here to be easier to read. Answers both of your question :)

HTML(Notice I separated the first list so it has 3 li-s instead of just 1):

<body>
<header>
    <div class="container">
        <nav class = "navbar navbar-default" role = "navigation">           
            <div class = "navbar-header navbar-right">
                <a class = "navbar-brand" href = "#">My LINUX distros</a>
            </div>
            <div class="nav navbar-nav">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                        My favorite Linux distros...
                        <span class="caret"></span></button>

                        <ul class="dropdown-menu">
                            <li class="dropdown-submenu">
                                <a class="test" tabindex="-1" href="#">RPM-based <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a tabindex="-1" href="#">Mandrake Linux</a></li>
                                    <li class="dropdown-submenu">
                                        <a class="test" tabindex="-1" href="#">Fedora-based <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Yellow Dog Linux</a></li>
                                        </ul>
                                    </li>
                                </ul>
            </li>
            <li class="dropdown-submenu">
                                <a class="test" tabindex="-1" href="#">Debian-based <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a tabindex="-1" href="#">Ubuntu</a></li>
                                    <li class="dropdown-submenu">
                                        <a class="test" tabindex="-1" href="#">Ubuntu flavors <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Lubuntu</a></li>
                                            <li><a href="#">Xubuntu</a></li>
                                            <li><a href="#">Kubuntu</a></li>
                                        </ul>
                                    </li>
                                </ul>
            </li>
            <li class="dropdown-submenu">
                                <a class="test" tabindex="-1" href="#">Others <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a tabindex="-1" href="#">Slackware</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
            </div>          
        </nav>
    </div>
</header>
</body>

CSS(position: absolute is neccessary on the child element):

.dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu .dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: -1px;
    }

jQuery:

$(document).ready(function(){
        $('.dropdown-submenu a.test').on("click", function(e){
            $('.dropdown-submenu ul').not(this.closest('ul')).hide();
            $(this).next('ul').toggle();                
            e.stopPropagation();
            e.preventDefault();
        });
    });