Bootstrap 3 - Multi Level Dropdown Menu

Graham

I'm playing around with Bootstrap 3 trying to get multi-level drop-down menus working.

First level drop-downs work perfectly, click on a 2nd level drop-down and the menu just closes. Has anyone come cross this before or even have an idea what I'm missing?

Thanks

<!-- Place everything within .navbar-collapse to hide it until above 768px -->
		<div class="nav-collapse collapse navbar-responsive-collapse">
			<ul class="nav navbar-nav pull-right">
				<li class="dropdown">
	                <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a>
	                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home 2</a></li>
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home 3</a></li>
	                </ul>
				</li>
				<li class="dropdown">
	                <a id="drop4" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
	                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Left</a></li>
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Right</a></li>
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Features</a></li>
	                </ul>
				</li>
				<li class="dropdown">
	                <a id="drop5" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Features <b class="caret"></b></a>
	                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Head</a></li>
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Feet</a></li>
						<li class="dropdown-submenu">
							<a id="drop53" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
			                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
			                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Full Width</a></li>
			                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Large Image</a></li>
			                </ul>
						</li>
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Our Staff</a></li>
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Rates</a></li>
	                </ul>
				</li>
				<li class="dropdown">
	                <a id="drop6" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
	                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact 1</a></li>
	                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact 2</a></li>
	                </ul>
				</li>
			</ul>
		</div><!--/.nav-collapse -->

Graham

UPDATE: multi-level Dropdown menus have been dropped in Bootstrap 3. A couple of additions to the CSS is on the way to working around this.