JS Menu Over Drop down

hi all,

this time i am back with a technical blog. I have been working with one javascript menu. Everything was going fine till we have seen a notorious issue at our screen. This was about java script menu was going below select/dropdown control. As shown in image.

I found this is happening because select control is a windowed control and it has higher z-index over simple div which were used for creating the popmenu. Later i found a simple solution to overcome this issue. Similar to select control there is another control which has a high z-index but unlike this control respect the normal html control's z-index. Hence this control allow other html control's like div to come over itself. And this special control is IFRAME. One can see once i have used that control i can have menu over the drop down.

following is the code i have used to remove the ie bug [Note : This bug is removed in IE8]
function showPopUpMenu(elemID)

{

var divPopup;

if(document.all) { divPopup = document.all(elmID); }

else if(document.getElementById) { divPopup = document.getElementById(elmID); }

var iFrame = document.createElement("IFRAME");

iFrame.setAttribute("src", ""); //Match IFrame position with divPopup iFrame.style.position="absolute"; iFrame.style.left =divPopup.offsetLeft + 'px'; iFrame.style.top =divPopup.offsetTop + 'px'; iFrame.style.width =divPopup.offsetWidth + 'px'; iFrame.style.height =divPopup.offsetHeight + 'px';

document.body.appendChild(iFrame);

divPopup.style.visibility="visible"; g_PopupIFrame = iFrame;

}

function hidePopUpMenu(elmID,mmObj)

{

var ID = .. code to get div id;

if(document.all)

document.all(ID).style.visibility="hidden";

else if(document.getElementById)

document.getElementById(ID).style.visibility="hidden";

document.body.removeChild(g_PopupIFrame); g_PopupIFrame=null;

}

Virat....