I may be a little late....I implemented it for my app but never used
because my menu has only 4 items :-P
include bootstrap.css and add to css this (took from
https://github.com/twitter/bootstrap/issues/424)
.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;
}
def twitter_menu(menu, level=0):
"""
Generates twitter bootstrap's compliant menu
"""
lis = []
for li in menu:
(text, active, href) = li[:3]
sub = len(li) > 3 and li[3] or []
if len(sub) == 0:
li_class = None
el = LI(A(text, _href=href), _class=li_class)
else:
li_class = 'dropdown'
caret = level == 0 and B(_class='caret') or
I(_class='icon-chevron-right')
sub_ul = twitter_menu(sub, level=level+1)
el = LI(A(text, caret, _href=href, _class="dropdown-toggle",
**{'_data-toggle' : 'dropdown'}), sub_ul, _class=li_class)
lis.append(el)
if level == 0:
return UL(*lis, _class='nav')
else:
return UL(*lis, _class="dropdown-menu")