<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script language="javascript"> 
var isResizing=false;
function Resize_mousedown(event,obj){
if(!obj.setCapture) return ;
isResizing=true;
obj.mouseDownX=event.clientX;
obj.leftTdW=obj.previousSibling.offsetWidth;
obj.setCapture();
}function Resize_mousemove(event,obj){
if(!isResizing) return ;
    var newWidth=obj.leftTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>1) obj.previousSibling.style.width = newWidth;
    else {
     obj.previousSibling.style.width=1;
     obj.childNodes[0].innerHTML="&gt;";
    }
    if(newWidth>149) obj.childNodes[0].innerHTML="&lt;";
}
function Resize_mouseup(event,obj){
if(!isResizing) return;
obj.releaseCapture();
isResizing=false;
}
function Resize_setDefault(event,obj){
if(obj.innerHTML=="&lt;") {
obj.parentNode.previousSibling.style.width=1;
obj.innerHTML="&gt;";
}
else{
obj.parentNode.previousSibling.style.width=150;
obj.innerHTML="&lt;";
}
event.cancelBubble=true;
}
</script> <STYLE type="text/css" re="ForMenu">
.menuUl {
 width:150px;border:#888888 1px solid;position:absolute;left:0px;top:17px;display:none;
}
.menuLi {
 width:150px;border:#888888 1px solid;position:relative;background-color:white;height:18px;display:inline;
}
.menuUl .menuUl {
 left:149px;top:2px;
}
.menuUl .menuLi {
 display:block;
}.menuLi A{
 color:#0044ff;text-decoration:none;font:14px verdana;
}
.menuLi A:hover {
 background-color:#f0d0d0; 
}</STYLE>
<SCRIPT language=javascript srcccccc="../Menus/Menu_MouseFun.js" re="ForMenu" >
function Menu_mouseover(event,obj)
{
var toLi=event.srcElement||event.target;
if(toLi==obj) return ;
if(toLi.className!="menuLi") toLi=toLi.parentNode;
var subUl=toLi.getElementsByTagName("div");
if(subUl.length>0) {
subUl[0].style.display="block";
if(subUl[0].insertAdjacentHTML && subUl[0].getElementsByTagName("iframe").length==0)//add a bgIframe for IE
{
subUl[0].insertAdjacentHTML("afterBegin","<iframe style='z-index:-1;position:absolute;border:0px;width:100%;height:"+subUl[0].offsetHeight+";'></iframe>");
}
}
}
function Menu_mouseout(event,obj)
{
var fromLi=event.srcElement||event.target;
var toLi=event.toElement||event.relatedTarget;
if(toLi==null) toLi=obj;
if(fromLi.className!="menuLi") fromLi=fromLi.parentNode;
if(toLi.className!="menuLi") toLi=toLi.parentNode;
var toLiParent=toLi.parentNode||toLi;
var maxLevel=10;
while( maxLevel-- > 0)
{
if(fromLi.className!="menuLi" || fromLi==toLi || fromLi==toLiParent|| fromLi==toLiParent.parentNode ) return;
var subUl=fromLi.getElementsByTagName("div");
if(subUl.length>0){
if(subUl[0]==toLiParent) break;
subUl[0].style.display="none";
}
fromLi=fromLi.parentNode.parentNode;
}
}
</SCRIPT>
</head><body style='margin:0' scroll="no">
<table style="width:100%;height:100%;" border=0  cellspacing=0 cellpadding=0 >
<tr style="height:40px;"><td colspan=3 nowrap >
<!--menu begin -->
Menu<br>
<div onmouseover="Menu_mouseover(event,this);" onmouseout="Menu_mouseout(event,this);" >
  <div class="menuLi" >
    <A href="#">Services</A>
    <div class="menuUl" >
      <div class="menuLi" >
        <A href="#">Web Design</A> 
        <div class="menuUl" >
          <div class="menuLi" ><A href="#">Web Design->sub</A></div> 
          <div class="menuLi" ><A href="#">Web Design->sub2</A></div> 
        </div>
      </div>
      <div class="menuLi" ><A href="#">Internet Marketing</A></div> 
      <div class="menuLi" ><A href="#">Hosting</A></div>
      <div class="menuLi" ><A href="#">Domain Names</A></div> 
      <div class="menuLi" ><A href="#">Broadband</A></div>
    </div>
  </div>
  <div class="menuLi" >
    <A href="#">Services</A>
    <div class="menuUl" >
      <div class="menuLi" >
        <A href="#">Web Design</A> 
        <div class="menuUl" >
          <div class="menuLi" ><A href="#">Web Design->sub</A></div> 
          <div class="menuLi" ><A href="#">Web Design->sub2</A></div> 
        </div>
      </div>
      <div class="menuLi" ><A href="#">Internet Marketing</A></div> 
      <div class="menuLi" ><A href="#">Hosting</A></div>
      <div class="menuLi" ><A href="#">Domain Names</A></div> 
      <div class="menuLi" ><A href="#">Broadband</A></div>
    </div>
  </div>
</div>
<!--menu end -->
</td>
</tr>
<tr style="height:2px;line-height:2px;background-color:#cccccc;"><td colspan=3 >
</td>
</tr>
<tr>
<td style="width:150px;" >
<iframe zindex=1 id="a" src="http://www.google.com" style="width:100%;height:100%; "></iframe>
</td><td style="width:8px;cursor:e-resize;background-color:#cccccc;size:8px;z-index:10;" align="center" valign="middle"
     onmousedown="Resize_mousedown(event,this);" onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);" >
     <font style="background-color:#eeeeee;cursor:pointer;" onmousedown="Resize_setDefault(event,this);">&lt;</font>
</td><td>
<iframe zindex=1 id="b" name="ContentFrame" src="http://www.baidu.com" style="width:100%;height:100%;z-index:10"></iframe>
</td>
</tr>
</table>
</body>
</html>

解决方案 »

  1.   

    以上代码,是相对楼主所言(或楼主所引用)“比较流行用window.createPopup”,因为对这种流行有点迷惑:
    -----
    <!--使用层做下拉菜单或者漂浮图片的话,最大的问题就是会被输入框等挡住,更别说框架,所以现在比较流行用window.createPopup();的说,它可以在页面所有元素之上,不存在被谁遮挡的问题。-->
      

  2.   

    也可以参考一下这里:
    http://www.v-ec.com/dh20156/article.asp?id=14