We are using div tag in aspx and javascript functions to show context menu in our web application. In IE6 the sub menus in the context menu are getting displayed at the correct x and y coordinates what we have hard-coded in our application. But in IE7 and IE8, the sub menus are getting overlapped and in some machines the menus are going behind the window. Can any one please tell what is wrong or any other alternatives to display conext menu and submenu?
<HTML>
<HEAD>
<TITLE>Nested popup windows</TITLE>
<script>
var firstPopupDiv = null;
var popup = null;
var vpopup = null;
function tag_onclick()
{
var popup = window.createPopup();
var div = popup.document.createElement("DIV");
div.style.backgroundColor = "green";
div.style.width = 200;
div.style.height = 200;
div.onclick = div_onclick;
popup.document.body.appendChild(div);
firstPopupDiv = div;
vpopup = popup.document.parentWindow;
popup.show(30, 30, 200, 200, maindiv);
}
function div_onclick()
{
var fpopup = vpopup.createPopup();
fpopup.document.body.innerHTML = "<div id=\"MarkupSubMenu\" style=\"position:relative\"> Markups</div>";
fpopup.document.body.style.backgroundColor = "red";
fpopup.show(230, 30, 200, 200, firstPopupDiv); // Not shown at 230!
}
</script>
</HEAD>
<BODY>
<div id="maindiv" onclick="tag_onclick()">Click me</div>
</BODY>
</HTML>