Iframe Shim() [menu overlap on pdf file in iframe]

Say You have menu with structure  <ul class='ParentMenu'><li>ul>

Add these jquery method in the main page

$(function () {
$(".ParentMenu> li").hover(
function () {
shim(this);
},
function () {
});
$(".ParentMenu> li > ul:last").show();
shim($(".ParentMenu> li > ul:last").parent());
});
function shim(menu) {
var overlay = $('#overlay');
var submenu = $(menu).find('ul');
// set to dimension of submenu
$(overlay).width($(submenu).outerWidth(false));
$(overlay).height($(submenu).outerHeight(false));
$(overlay).css('position', 'absolute');
var item = $(submenu).find('li:first');
var top = -1 * parseInt($(submenu).css('borderTopWidth'));
var left = -1 * parseInt($(submenu).css('borderLeftWidth'));
$(item).prepend(overlay);
$(item).css('background-color', '#97c6e7');
$(overlay).css('zIndex', -1); // other indexes don't work
$(overlay).css('top', top);
$(overlay).css('left', left);
$(overlay).show();
}

Add an iframe above menus

<iframe id="overlay" scrolling="no" frameborder="0" style="border:
0px; background-color: transparent; padding: 0px; margin: 0px;
overflow:hidden; display: none;"></iframe>

Need to make it transparent :

If You need assistance - contact at rohitsuri84@gmail.com