下拉菜单在１０２４*７６８和８００*６００的分辨率下怎么定位（用层）

始终做成 800 * 600, 居中显示即可。
菜单使用 position: relative 来定位子菜单选项即可。

解决方案 »

  1.   

    但是菜单position: relative 里面的方位怎么控制
    比如left=30%;top=30%;但不同分辨率　　　显示总是错位　　　居中又怎么控制
      

  2.   

    <b onmouseover="menu.style.display=''" onmouseout="menu.style.display='none'">菜单
    <table id="menu" cellspacing="1" cellpadding="0"  style="display:'none';position:relative;left:2px;top:2px;" bgcolor="red">
    <tr bgcolor="white"><td>菜单一</td></tr>
    <tr bgcolor="white"><td>菜单二</td></tr>
    </table>
    </b>
      

  3.   

    用表格定位，插入一个两行一列的表格，第一个TR插入一个固定层，第二个TR再插入一个跟随鼠标动作而显示或者隐藏的层即可实现完整定位。
      

  4.   

    ////////////////////////////////////////////////////
    function Rect(){
    var width=0;
    var height=0;
    var left=0;
    var top=0;
    var right=0;
    var bottom=0;
    }
    Rect.prototype.Cal=function () {
    this.right=this.left+this.width;
    this.bottom=this.top+this.height;
    }
    Rect.prototype.ContaintPoint=function (x,y){
    if(x>=this.left && x<=this.right && y>=this.top && y<=this.bottom) return true;
    return false;
    }
    Rect.prototype.BeCoverBy=function (rectSrc){
    return rectSrc.ContaintPoint(this.left,this.top) ||
    rectSrc.ContaintPoint(this.left,this.bottom) ||
    rectSrc.ContaintPoint(this.right,this.top) ||
    rectSrc.ContaintPoint(this.right,this.bottom) ||
    this.ContaintPoint(rectSrc.left,rectSrc.top) ||
    this.ContaintPoint(rectSrc.right,rectSrc.top) ||
    this.ContaintPoint(rectSrc.left,rectSrc.bottom) ||
    this.ContaintPoint(rectSrc.right,rectSrc.bottom);
    }
    function getElementRect(obj){
    var e=obj;
    var pos=new Rect;
    pos.width=obj.offsetWidth;
    pos.height=obj.offsetHeight;
    pos.left=obj.offsetLeft;
    pos.top=obj.offsetTop;
    while(e=e.offsetParent){
    pos.left+=e.offsetLeft;
    pos.top+=e.offsetTop;
    }
    pos.Cal();
    return pos;
    }
    ////////////////////////////////////////////////
    偶自己用的一个类，懒得改了
    var rectTemp=getElementRect(document.all['MenuBar']);
    divMenu.runtimeStyle.left=rectTemp.left;
    divMenu.runtimeStyle.top=rectTemp.bottom-1;
    ……………………
      

  5.   

    如果style="display:'none';position:relative;left:2px;top:2px;" bgcolor="red">
    那么 就会在下拉菜单与下个段落之间 出现一段空白，高度为下拉菜单的高度，怎样消去这段空白？？？
      

  6.   

    程序代码如下：<html>
    <head>
    <script language="JavaScript">function MM_findObj(n, d) { //v4.0
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && document.getElementById) x=document.getElementById(n); return x;
    }function MM_showHideLayers() { //v3.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
        obj.visibility=v; }
    }
    //-->
    </script>
    </head>
    <body>
    <table>
    <tr><td><a href="./sort.php?sortid=2" onMouseOver="MM_showHideLayers('layer2','','show')" onMouseOut="MM_showHideLayers('layer2','','hide')"><img src="images/menu/menu_03.jpg" width="79" height="38" border="0"></a></td></tr><div id="layer2" style="position:relative; left: 198px; top: 55px; width:85px; height:90px; z-index:2; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000; overflow: auto; visibility: hidden"> 
         <table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="#3399FF" onMouseOut="MM_showHideLayers('layer2','','hide')" onMouseOver="MM_showHideLayers('layer2','','show')">
              <tr> 
                <td align="center" bgcolor="#E6F4FF"><a href="article.php?articleid=13" target="_blank">aaaaaaaa</a></td>
              </tr>
              <tr> 
                <td align="center" bgcolor="#E6F4FF"><a href="sort.php?sortid=2" target="_blank">bbbbbbbb</a></td>
              </tr>
              <tr> 
                <td align="center" bgcolor="#E6F4FF"><a href="article.php?articleid=11" target="_blank">ccccccccccc</a></td>
              </tr>
              <tr> 
                <td align="center" bgcolor="#E6F4FF"><a href="article.php?articleid=10" target="_blank">ddddddddd</a></td>
              </tr>
              <tr> 
                <td align="center" bgcolor="#E6F4FF"><a href="article.php?articleid=9" target="_blank">eeeeeee</a></td>
              </tr>
              </table>
        </div>
    </html>