头疼死了，兄弟们，来帮帮我！关于css的小问题，在线急等

请大家看看为什么这个弹出目录会有这样的问题：当鼠标移动到第一个目录项时，会显示一个隐藏的层，这个层应该覆盖下面的内容，但事实确实下面的内容穿透过来了，不知道为什么如果我讲的不清楚，请把下面的代码保存成htm，即可看到效果：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default16.aspx.cs" Inherits="Default16" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<script language="javascript" type="text/javascript" >
function MakeVisibilityHidden(elementName)
{
    var el = document.getElementById(elementName);
    el.style.visibility = 'hidden';
}
function MakeVisibilityVisible(elementName)
{
    var el = document.getElementById(elementName);
    el.style.visibility = 'inherit';
}
</script><style type="text/css">
body {
  font-size: 10pt;
  font-family: Arial;
}
.CssPopUpMenuContainer {
  height: 20px;
  position: relative;
  z-index: 98;
}
.CssPopUpMenuContainerWithoutZIndex {
  height: 20px;
  position: relative;
}
.CssPopUpMenu {
  position: absolute;
  display: block;
  visibility: hidden;
  width: 300px;
  background-color: #EEEEEE;
  padding: 2px;
  top: 19px;
  left: 0px;
  border: solid 1px #AAAAAA;
  z-index: 99;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="3" rules="all" border="1"
       style="background-color:White; font-size:9pt; border-collapse:collapse;">
<tr>
<td>
<div id="PopUpMenuContainer4" class="CssPopUpMenuContainerWithoutZIndex"
 onmouseover='MakeVisibilityVisible("PopUpMenu4"); this.style.backgroundColor="silver";'
 onmouseout='MakeVisibilityHidden("PopUpMenu4"); this.style.backgroundColor="Transparent";' >
MouseOverHere
<div id="PopUpMenu4" class="CssPopUpMenu" >
<p>Line 1 - My awesome popup menu.</p>
<p>Line 2 - I sure wish I could figure this out.</p>
<p>Line 3 - Why is this so hard?</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="PopUpMenuContainer5" class="CssPopUpMenuContainerWithoutZIndex"
 onmouseover='MakeVisibilityVisible("PopUpMenu5"); this.style.backgroundColor="silver";'
 onmouseout='MakeVisibilityHidden("PopUpMenu5"); this.style.backgroundColor="Transparent";' >
MouseOverHere
<div id="PopUpMenu5" class="CssPopUpMenu" >
<p>Line 1 - My awesome popup menu.</p>
<p>Line 2 - I sure wish I could figure this out.</p>
<p>Line 3 - Why is this so hard?</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table></body>
</html>

解决方案 »

  1.   

    这个问题在firefox中不会出现，但在IE中很严重，请大家帮帮我，今日17：00结贴发分
      

  2.   

    http://www.positioniseverything.net/easyclearing.html
      

  3.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default16.aspx.cs" Inherits="Default16" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
    <script language="javascript" type="text/javascript" >
    function MakeVisibilityHidden(elementName)
    {
        var el = document.getElementById(elementName);
        el.style.visibility = 'hidden';
    }
    function MakeVisibilityVisible(elementName)
    {
        var el = document.getElementById(elementName);
        el.style.visibility = 'inherit';
    }
    </script><style type="text/css">
    body {
      font-size: 10pt;
      font-family: Arial;
    }
    .CssPopUpMenuContainer {
      height: 20px;
      position: relative;
      z-index: 98;
    }
    .CssPopUpMenuContainerWithoutZIndex {
      height: 20px;
      position: relative;
    }
    .CssPopUpMenu {
      display: block;
      visibility: hidden;
      width: 300px;
      background-color: #EEEEEE;
      padding: 2px;
      top: 19px;
      left: 0px;
      border: solid 1px #AAAAAA;
      z-index: 99;
    }
    </style>
    </head>
    <body>
    <table cellspacing="0" cellpadding="3" rules="all" border="1"
           style="background-color:White; font-size:9pt; border-collapse:collapse;">
    <tr>
    <td>
    <div id="PopUpMenuContainer4" class="CssPopUpMenuContainerWithoutZIndex"
         onmouseover='MakeVisibilityVisible("PopUpMenu4"); this.style.backgroundColor="silver";'
         onmouseout='MakeVisibilityHidden("PopUpMenu4"); this.style.backgroundColor="Transparent";' >
        MouseOverHere
        <div id="PopUpMenu4" class="CssPopUpMenu" >
            <p>Line 1 - My awesome popup menu.</p>
            <p>Line 2 - I sure wish I could figure this out.</p>
            <p>Line 3 - Why is this so hard?</p>
        </div>
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <div id="PopUpMenuContainer5" class="CssPopUpMenuContainerWithoutZIndex"
         onmouseover='MakeVisibilityVisible("PopUpMenu5"); this.style.backgroundColor="silver";'
         onmouseout='MakeVisibilityHidden("PopUpMenu5"); this.style.backgroundColor="Transparent";' >
        MouseOverHere
        <div id="PopUpMenu5" class="CssPopUpMenu" >
            <p>Line 1 - My awesome popup menu.</p>
            <p>Line 2 - I sure wish I could figure this out.</p>
            <p>Line 3 - Why is this so hard?</p>
        </div>
    </div>
    </td>
    </tr>
    <tr>
    <td>
    </td>
    </tr>
    </table></body>
    </html>
      

  4.   

    PopUpMenu4
    PopUpMenu5这两个DIV放到外面来就能遮住了！
      

  5.   

    mynxyl 兄的代码不行啊，在FF里也不行了，jack20080808 提供的链接正在阅读，如果解决了问题会发上来的
    继续期待高手帮忙

      

  6.   

    不是说了么，你那个DIV套嵌在里面，拿到外面来就遮住了，不过位置需要用JS定位！
      

  7.   

    谢谢weinaxxc 兄，刚才没看到您的回复，尽管我不会“绝对定位”，但确实帮了我最大的一步！谢谢！我正在尝试解决，如果找到好的方法会发上来的，谢谢
      

  8.   

    搞定了，暂时用鼠标event事件做了，昨天断网，所以没散分，sorry，现在散