JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<ul id="main-menu" class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" 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></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
<ul id="menu2" 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></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
<ul id="menu3" 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></li>
</ul>
</li>
</ul>
<br clear="all" />
<iframe src="http://www.bing.com" style="width: 500px; height: 500px">
<p>Your browser does not support iframes.</p>
</iframe>
<br clear="all" />
JavaScript
/* Creates overlay that allows dropdown main menus to work with
* iframes. See boostrap-dropdown.js for details */
$('#main-menu').on("click", function() {
var W=0, H=0, X=0, Y=0;
$("#centerPanel").each(function(i,el){
W = $(el).width();
H = $(el).height();
X = $(el).position().left;
Y = $(el).position().top;
$(this).after('<div class="overlay" />');
$(this).next('.overlay').css({
width: W,
height: H,
left: X,
top: Y
});
});
})