CSS-右键菜单DIV TABLE

DIV:
动态增减DIV：

总有bug.不停的右键 就只会增加子节点！
XX.js：

<div id="divMenu2" class="skin0" onMouseover="doActive()" onMouseout="doNormal()" onClick="goUrl();">
<div class="menuitems" script="refreshNode">刷新</div>
</div>

增加子节点：
设置的样式和属性不好用

// var  o = document.getElementById("divMenu"+MenuNum);
// var newdiv   =  document.createElement("DIV");
// newdiv.innerHTML="增加";
// newdiv.setAttribute("class","menuitems");
// newdiv.setAttribute("onClick","alert(2222);");
// newdiv.setAttribute("url","");
// newdiv.setAttribute("target","basefrm");
// o.appendChild(newdiv);
// var newdiv2   =  document.createElement("DIV");
// newdiv2.innerHTML="删除";
// newdiv2.setAttribute("onClick","goUrl()");
// newdiv2.setAttribute("class","menuitems");
// newdiv2.setAttribute("target","basefrm");
// o.appendChild(newdiv2);


子节点全删除
// if(MenuNum==2){
// var o  = document.getElementById("divMenu"+MenuNum);
// var n  = o.childNodes.length;
// for(var i=0;i<n;i++){
// o.removeChild(o.firstChild);
// }
//
// }


<style>

   .skin0 {
position:absolute;
text-align:left;
width:120px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:hand;
visibility:hidden;
}
.menuitems {
padding-left:20px;
padding-right:10px;
}   
</style>

用table实现：静态的

<div id="itemMenu" style="display:none">

<table width="100%"  height="100%" bgcolor="white"  style="border:2px solid black" cellspacing="0">
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.addToOther();parent.refre();">
<font size="2px">添加</font>
</td>
</tr>
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.view()">
<font size="2px">查看</font>
</td>
</tr>
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.modify()">
<font size="2px">修改</font>
</td>
</tr>
<tr>
<td style="cursor:hand;" align="center"
onclick="parent.del();parent.refre();">
<font size="2px">删除</font>
</td>
</tr>

</table>
</div>

//右键弹出菜单
function showMenu(obj){

document.getElementById("sltid").value = obj;//选中的实例id
var  isdef =  document.getElementById("isdef").value;
var menudiv;
menudiv = document.getElementById("itemMenu");
popMenu(menudiv,120,"1111");
event.returnValue=false;
event.cancelBubble=true;
return false;
}


function popMenu(menuDiv,width,rowControlString){

//创建弹出菜单
var pop=window.createPopup();
//设置弹出菜单的内容
pop.document.body.innerHTML=menuDiv.innerHTML;
var rowObjs=pop.document.body.all[0].rows;
//获得弹出菜单的行数
var rowCount=rowObjs.length;
//循环设置每行的属性
for(var i=0;i<rowObjs.length;i++)
{
//如果设置该行不显示，则行数减一
var hide=rowControlString.charAt(i)!='1';
if(hide){
rowCount--;
}
//设置是否显示该行
rowObjs[i].style.display=(hide)?"none":"";

//设置鼠标滑入该行时的效果

rowObjs[i].cells[0].onmouseover=function()

{

this.style.background="#3366CC";

this.style.color="white";

}

//设置鼠标滑出该行时的效果

rowObjs[i].cells[0].onmouseout=function(){

this.style.background="white";

this.style.color="black";

}


}

//屏蔽菜单的菜单
pop.document.oncontextmenu=function()
{
return false;
}

//选择右键菜单的一项后，菜单隐藏
pop.document.onclick=function()
{
pop.hide();
}
//显示菜单
pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);
return true;

}