Get in touch:
01524 851 877
07718 896 553

Twitter Bootstrap Navbar and Multiple Level Dropdowns

Posted on Jun 23 2012 by Matthew Jakeman

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.

.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;
}.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;

}

1 Comment

  1. Stefan says:

    How can I open the new submenu on click and not on hover?

Leave a comment