I am trying to create submenus within Bootstrap 3 (which we all know have been removed) and I would like to display the 2nd and 3rd levels of the menu on a click instead of a hover.

For some reason every time I click on 2nd level or third level it simply closes the dropdown menu as if it is toggling the regular bootstrap open/close function.

I need to work in a manor...
1.) Click on Top level - display down-drop items
2.) Click on item from drop-down - displays 2nd level items
3.) Click on item from 2nd level - displays 3rd level items

basically i want to activate this css class

.dropdown-submenu:hover>.dropdown-menu{display:block;}

on a click instead of a hover.

Currently i have tried the following

Link To Fiddle
http://jsfiddle.net/Tenacity/ejLDg/1/

Preferably can you should your solution on the fiddle. Feel free to rip this entire example apart to achieve a solution as i'm completely stuck. Thanks in advance.

The HTML

<nav class=navbar navbar-default navbar-fixed-top role=navigation>

      <div class=navbar-header>

        <button type=button class=navbar-toggle 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>

        <a class=navbar-brand href=index.html>Your Logo Here</a>

      </div>

      <div class=collapse navbar-collapse id=bs-example-navbar-collapse-1>

        <ul class=nav navbar-nav>           

            <li class=dropdown>

                <a href=# class=dropdown-toggle data-toggle=dropdown id=test1>Top Level <b class=caret></b></a>         

                <ul class=dropdown-menu>







                 <li class=dropdown-submenu>

                    <a tabindex=-1 href=#>To 2nd</a>

                    <ul class=dropdown-menu>

                      <li class=dropdown-submenu>

                        <a href=#>2nd to 3rd</a>

                        <ul class=dropdown-menu>

                            <li><a href=#>3rd level</a></li>

                        </ul>

                      </li>

                    </ul>

                  </li>

                </ul>

            </li>          

        </ul>

      </div>

    </nav>

The CSS

.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 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:#cccccc;margin-top:5px;margin-right:-10px;}

The JS

$(document).ready(function() {

   $('.dropdown-submenu').on('click', function(){

   $(this).parent().addClass('open');

   $(.btn-navbar).click();

   alert(clicked);

  });

});

Thanks in advance :D