可参考我这个sample:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>    <script type="text/javascript">
    function HideMenu(e)
{
//alert('a');
if(e.srcElement&&e.srcElement.parentNode.tagName.toLowerCase()=='li') return ;//ie
if(e.target&&e.target.parentNode.tagName.toLowerCase()=='li') return;//ffmenu.style.display="none";
}
function contextmenu(e)
{
    menu.style.display="block";
    menu.style.left=e.clientX+'px';
    menu.style.top=e.clientY+'px';
}var menu;
function loadmenu()
{
 menu=document.getElementById("divMenu");
}
    </script></head>
<body onload="loadmenu()" oncontextmenu="contextmenu(event);return false;" onclick="HideMenu(event);">
    <div>
        <pre>
        click here 
        click here 
        click here 
        click here 
        click here 
        click here 
        click here 
        click here 
        click here            </pre>
    </div>
    <div id="divMenu" style="filter: Alpha(opacity=80); opacity: 0.8; display: none;
        position: absolute; z-index: 999; top: 60px; left: 248px; border: none;">
        <table style="background-color: ButtonFace; border: none; width: 80px;">
            <tr>
                <td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
                    add
                </td>
            </tr>
            <tr>
                <td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
                    update
                </td>
            </tr>
            <tr>
                <td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
                    copy
                </td>
            </tr>
            <tr>
                <td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
                    paste
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

解决方案 »

  1.   


    <HTML><HEAD><TITLE>右键菜单的淡入淡出效果</TITLE>
    <META content="text/html; charset=gb2312" http-equiv=Content-Type>
    <SCRIPT language=JavaScript>
    <!-- // RightClickMenu
    var intDelay=1; //设置菜单显示速度,越大越慢
    var intInterval=20; //每次更改的透明度 
    function showmenuie5(){
    var rightedge=document.body.clientWidth-event.clientX
    var bottomedge=document.body.clientHeight-event.clientY
    if (rightedge<ie5menu.offsetWidth)
    ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
    else
    ie5menu.style.left=document.body.scrollLeft+event.clientX
    if (bottomedge<ie5menu.offsetHeight)
    ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
    else
    ie5menu.style.top=document.body.scrollTop+event.clientY
    ie5menu.style.visibility="visible"
    //ie5menu.style.visibility=""
    ie5menu.filters.alpha.opacity=0
    GradientShow()
    return false
    }
    function hidemenuie5(){
    //ie5menu.style.visibility="hidden"
    GradientClose()
    }
    function highlightie5(){
    if (event.srcElement.className=="menuitems"){
    event.srcElement.style.backgroundColor="highlight"
    event.srcElement.style.color="white"
    }
    }
    function lowlightie5(){
    if (event.srcElement.className=="menuitems"){
    event.srcElement.style.backgroundColor=""
    event.srcElement.style.color="#000000"
    }

    function jumptoie5(){
    if (event.srcElement.className=="menuitems"){
    if (event.srcElement.url != ''){
    if (event.srcElement.getAttribute("target")!=null)
    window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
    else
    window.location=event.srcElement.url
    }
    }
    } function GradientShow() //实现淡入的函数 

    ie5menu.filters.alpha.opacity+=intInterval 
    if (ie5menu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay)
    } function GradientClose() //实现淡出的函数 

    ie5menu.filters.alpha.opacity-=intInterval 
    if (ie5menu.filters.alpha.opacity>0) { 
      setTimeout("GradientClose()",intDelay) 
      } 
    else { 
      ie5menu.style.visibility="hidden"
      } 
    } function ChangeBG() //改变菜单项的背景颜色,这里的两种颜色值可以改为你需要的 

    oEl=event.srcElement 
    if (oEl.style.background!="navy") { 
       oEl.style.background="navy" 
       } 
       else { 
       oEl.style.background="#cccccc" 
       } 

    // -->
    </SCRIPT> <STYLE type=text/css>
    .cMenu {
    FILTER: alpha(opacity=0);BACKGROUND-COLOR: #D6D3CE;BORDER-BOTTOM: #666666 2px solid; BORDER-LEFT: #E4E4E4 2px solid; BORDER-RIGHT: #666666 2px solid; BORDER-TOP: #E4E4E4 2px solid; COLOR: #000000; CURSOR: default; FONT-SIZE: 9pt; color:#000000;FONT-WEIGHT: normal; LINE-HEIGHT: 20px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 110px
    }
    .menuitems {
    font-size:9pt;
    MARGIN: 2px;
    PADDING-BOTTOM: 0px;
        PADDING-LEFT: 15px;
        PADDING-RIGHT: 3px;
        PADDING-TOP: 0px;
    }
    </STYLE> <META content="Microsoft FrontPage 4.0" name=GENERATOR>
    </HEAD>
    <BODY>
    <OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0>
    </OBJECT>
    <RIGHTCLICK><!--[if IE]>
    <DIV class=cMenu id=ie5menu onclick=jumptoie5() onmouseout=lowlightie5() 
    onmouseover=highlightie5()> <DIV class=menuitems url="javascript:click_obj(0)">后退</DIV>
    <DIV class=menuitems url="javascript:click_obj(1)">前进</DIV>
    <DIV class=menuhr><hr style="width:100%"></DIV>
    <DIV class=menuitems url="javascript:click_obj(2)">刷新</DIV>
    <DIV class=menuitems url="javascript:click_obj(3)">加入收藏夹</DIV>
    <DIV class=menuitems url="javascript:click_obj(4)">查看源文件</DIV>
    <DIV class=menuhr><hr style="width:100%"></DIV>
    <DIV class=menuitems url="javascript:click_obj(5)">属性</DIV> </DIV>
    <![endif]--> <SCRIPT language=JavaScript>
    <!--
    function click_obj(id){
    switch(id){
    case 0: 
    history.back()
    break
    case 1:
    history.forward()
    break
    case 2:
    window.location.reload()
    break
    case 3:
    window.external.AddFavorite(location.href, document.title)
    break
    case 4:
    window.location = "view-source:" + window.location.href
    break
    case 5:
    document.all.WebBrowser.ExecWB(10,2)
    break
    }
    } if (document.all&&window.print){
    ie5menu.className="cMenu"
    document.oncontextmenu=showmenuie5
    document.body.onclick=hidemenuie5
    }
    //-->
    </SCRIPT>
    </RIGHTCLICK>
    </BODY></HTML>给你个完整版的
      

  2.   

    代码没有问题
    但是你的document.body.scrollLeft 
    里面的body建议都换成documentElement
      

  3.   

    可能是因为你的这个菜单在页面的右侧, 你点击右键的时候鼠标右侧不够显示菜单的宽度
    如果非要显示在右侧可以把这两行去掉这样
    <script>
    function showmenuie5() 
    {   
    var rightedge = document.body.clientWidth-event.clientX;    
    var bottomedge = document.body.clientHeight-event.clientY;    
    //if (rightedge < ie5menu.offsetWidth) 
    //ie5menu.style.left = document.body.scrollLeft + event.clientX -ie5menu.offsetWidth; 
    //else 
    ie5menu.style.left = document.body.scrollLeft + event.clientX; 
      if (bottomedge < ie5menu.offsetHeight) 
    ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight; 
      else 
    ie5menu.style.top = document.body.scrollTop + event.clientY; 
       ie5menu.style.visibility = "visible";    
       return false;   

    function hidemenuie5() 

    ie5menu.style.visibility = "hidden"; 
    }    
    if (document.all&&window.print)  
    {    
    ie5menu.className = menuskin; 
    document.oncontextmenu = showmenuie5; 
    document.body.onclick = hidemenuie5; //隐藏图层 
    }   
    </script>
      

  4.   

    多说一点,你的浮动层的样式里面的 position:absolute;才行要不就不是浮动层.left和top是不管用的