btn-group with submenu twitterbootstrap

Question

I'd like to know how can i build a btn-group with a sub-menu.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

and i' like to put this in the btn-group:

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

This is what i want: (but with twiiter-bootstrap)

Answer 1

Explanation: Basically this btn could go anywhere, I just put it in a button group to show there is nothing special about this button.

So first, you want to add data-toggle= dropdown to your button. Then, you need to add your standard drop down menu to the button. I guess the key here is knowing that there is nothing stopping you from adding a second dropdown menu into a submenu.

So go a head an add a submenu into whatever < li > you want, and inside that, just another dropdown-menu. So essentially we have Button -> dropdown menu -> dropdown submenu -> dropdown menu -> sub elements. Alittle confusing but pretty straight forward I think

<div class="btn-toolbar">
<div class="btn-group">

    <div class="btn-group">
      <!--start of dropdown button -->
      <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown Button <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
         <li class="dropdown-submenu">
           <a tabindex="-1" href="#">More options</a>
           <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Regular link</a></li>
                <li><a tabindex="-1" href="#">Regular link</a></li>
                <li><a tabindex="-1" href="#">Regular link</a></li>
           </ul>
         </li>
     </ul>
    </div>
    <!--end of dropdown button -->
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>
</div>

Edit:

After playing with this alittle, I realized that you do need the

<div class="btn-group"> 

wrapping the button, even if it is going to just stand alone. I created this updated fiddle to demo it.
http://jsfiddle.net/jamiematthews/yWrRA/1/