1

我正在尝试创建一个简单的下拉菜单，使用 z-index 应该覆盖它下面的内容。下面的代码在其他浏览器中运行良好，但在 IE8（这是我的公司浏览器）中它“推送”它下面的内容。基于此代码，任何人都可以看到它为什么这样做？

提前致谢！

查询：

<SCRIPT type=text/javascript>
    $(document).ready(function() {
    //toggle equipment menu
        $('img#PrimarySelectButtonImg').click(function () {
    $('ul#PrimarySelectMenu').slideToggle('fast');
        });
    });
</SCRIPT>

CSS：

<STYLE>
<!--

a:active, a:focus {
outline: none;
text-decoration: none;
border-bottom: 0px;
ie-dummy: expression(this.hideFocus=true);
}
a:hover {
text-decoration: none;
border-bottom: 0px;
}
#PrimarySelectArea {
height: 46px;
width: 272px;
cursor: pointer;
position: relative;
z-index: 100;
}
#PrimarySelectMenu {
display: none;
width: 268px;
border: 1px solid #ccc;
background-color: #fff;
}
.the_menu li {
padding: 15px 5px;
display: block;
}
.the_menu li:hover {
background-color: #f1f0ce;
}
.the_menu li a {
color: #666;
text-decoration: none;
}
.the_menu li a:hover {
color: #666;
background-color: #f1f0ce;
}
#MainTableHolder {
position: relative;
z-index: -1;
}
-->
</STYLE>

HTML：

<div id="kbankContainer">
  <div id="PrimarySelectArea"> <img src="images/PrimarySelectButton.png" width="272" height="38" id="PrimarySelectButtonImg" />
    <ul id="PrimarySelectMenu" class="the_menu">
      <li><a href="#">PRODUCT INFORMATION</a></li>
      <li><a href="#">PROTOCOLS</a></li>
      <li><a href="#">FORMS</a></li>
      <li><a href="#">INFORMATION</a></li>
    </ul>
  </div>

  <!-- begin tools table -->
  <div id="MainTableHolder">
    <table border=0 cellspacing=0 cellpadding=4 width="100%">
      <thead>
        <tr>
          <th width="36%" align=left>&nbsp;</th>
          <th width="32%" align=left>&nbsp;</th>
          <th width="32%" align=left>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>first row of  table</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我也尝试将 z-index: 100 行添加到#PrimarySelectMenu（实际下降的UL），它仍然将内容向下推。

再次感谢您的帮助！

4

0 回答 0