Men煤 desplegable basado en HAML en Bootstrap

Ligeramente a la izquierda, pero esto me tom贸 un tiempo resolverlo. HAML es genial, pero el meta y los elementos adicionales necesarios para que Bootstrap funcione fueron un poco molestos:

C贸digo HAML

.nav-collapse.collapse
%ul.nav
%li.active
%a{:href => "#"} Home
%li.dropdown
%a.dropdown-toggle{:href => "#", "role" => "button", "data-toggle" => "dropdown", "data-target" => "#"}
The dropdown item
%b.caret
%ul.dropdown-menu{"role" => "menu"}
%li
%a{:href => "#link1"}
Dropdown #1
%a{:href => "#link2"}
Dropdown #2
%a{:href => "#link3"}
Dropdown #3
%a{:href => "#link4"}
Dropdown #4
%li
%a{:href => "#contact"} Contact

Salida HTML (Bootstrap)

<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li class="dropdown">
<a role="button" href="#" data-toggle="dropdown" data-target="#" class="dropdown-toggle">
The dropdown item

<b class="caret"></b>
</a>
<ul role="menu" class="dropdown-menu">
<li>
<a href="#link1">
Dropdown #1

</a>
<a href="#link2">
Dropdown #2

</a>
<a href="#link3">
Dropdown #3

</a>
<a href="#link4">
Dropdown #4

</a>
</li>
</ul>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>