Whilst doing a bit of research into this, I came across this discussion on the bootstrap github page:

https://github.com/twitter/bootstrap/issues/424

There are a few additions you can include in the bootstrap CSS file to easily enable support for multi level dropdowns. The CSS is shown below:

.nav li.dropdown ul.dropdown-menu li:HOVER ul

{

display:block;

position:absolute;

left:100%;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

 

.nav li.dropdown ul.dropdown-menu ul

{

display: none;

float:right;

position: relative;

top: auto;

margin-top: -30px;

}

 

.nav li.dropdown ul.dropdown-menu .dropdown-menu::before

{

content: '';

display: inline-block;

border-top: 7px solid transparent;

border-bottom: 7px solid transparent;

border-right:7px solid #CCC;

border-right-color: rgba(0, 0, 0, 0.2);

position: absolute;

top: 9px;

left: -14px;

}

 

.nav li.dropdown ul.dropdown-menu .dropdown-menu::after

{

content: '';

display: inline-block;

border-top: 6px solid transparent;

border-bottom: 6px solid transparent;

border-right:6px solid white;

position: absolute;

top: 10px;

left: -12px;

}

Once this has been added you can easily place an extra level of dropdown in your HTML like so:

<ul class="nav">

<li class="active"><a href="#">Regular link</a></li>

<li class="dropdown" id="menu1">

<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">

Dropdown

<b class="caret"></b>

</a>

<ul class="dropdown-menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li>

<a href="#">Separated link</a>

<ul class="dropdown-menu">

<li><a href="#">Sub Menu</a></li>

</ul>

</li>

</ul>

</li>

</ul>

&nbsp;

Thanks to all the guys on that thread who posted solutions to this. It has come in very useful.