Twitter bootstrap is a regular addition to many sites I make at the moment. It has some great features and is extremely simple to use. The first drawback I have found with it though is a lack of support for multiple level dropdowns. These can be quite useful on navbar’s where you have a lot of options.

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.

If you center an unordered list within any section on an HTML page you might notice that although the text gets centered, the bullet points remain on the left side of the page. There is a quick and easy CSS fix for this:

#your_containing_div ul

{

display: inline-block;

text-align:left;

}