Multi level dropdown menu in Twitter Bootstrap

Twitter Bootstrap già ci mette a disposizione gli strumenti per creare dei menu dropdown.

Di default non abbiamo strumenti per il menu multi dropdown.

Ma possiamo ovviare con un pò di CSS.

Prima di tutto vediamo la struttura HTML:

<ul class="nav navbar-nav">
    <li><a href="">Home</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            MULTI<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="">VOCE 1</a></li>
            <li><a href="">VOCE 2</a></li>
            <li class="dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">voce 3</a>
                <ul class="dropdown-menu">
                    <li><a href="">VOCE 4</a></li>
                    <li><a href="">VOCE 5</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="">Logout</a></li>
</ul>

A questo punto vediamo le regole CSS:

.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0;left: 100%;margin-top: -6px;margin-left: -1px;-webkit-border-radius: 0 6px 6px 6px;-moz-border-radius: 0 6px 6px;
                                     border-radius: 0 6px 6px 6px; }
.dropdown-submenu:hover > .dropdown-menu { display: block; }
.dropdown-submenu > a:after { display: block;content: " ";float: right;width: 0;height: 0;border-color: transparent;border-style: solid;
                              border-width: 5px 0 5px 5px;border-left-color: #ccc;margin-top: 5px;margin-right: -10px; }
.dropdown-submenu:hover > a:after { border-left-color: #fff; }
.dropdown-submenu.pull-left { float: none; }
.dropdown-submenu.pull-left>.dropdown-menu { left: -100%;margin-left: 10px;-webkit-border-radius: 6px 0 6px 6px;-moz-border-radius: 6px 0 6px 6px;
                                             border-radius: 6px 0 6px 6px; }

Qualche regola ed il gioco è fatto!

Enjoy!