html试图使iframe垫片与Java小程序上的CSS下拉菜单一起工作

Question

因此，我有一个页面，它运行通过外部源生成的java小程序。我还从我自己的另一个站点获得了一些源代码，它使用CSS创建下拉菜单。我正在尝试在新的java小程序页面中实现相同的下拉样式

问题是，我的菜单总是在java小程序下面分层，而不考虑z层。我认为这是一个“已回答”的问题：How to display <div> over a Java applet in Chrome。然而，“解决方案”是一个死链接

我尝试在这里修改代码：http://midgetontoes.com/blog/2014/05/02/introduction-to-iframe-shim以适合我的应用程序

我的实现在多个层次上都失败了。首先，每当显示“我的垫片/下拉列表”时，它会将整个页面的内容向下移动20 ish px。其次，该插件下的下拉菜单仍然消失

以下是代码的相关部分：

CSS:

.iframeshim-container {
  position:relative;
  z-index: 100;
}

header ul.menu li.parent ul {
  background:url(dropdown_bg.png) 50% 0 repeat-x #98A2A9;
  display:none;
  left:0;
  margin:0;
  padding:10px;
  position:absolute;
  top:1px;
  width:200px;
  z-index:100;
}

.iframeshim-container .content-container{
  display:none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.iframeshim-container .shim-iframe{
  display:none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10000;

}

header ul.menu li.parent:hover ul {
  display: block;
}

header ul.menu li.parent:hover .iframeshim-container .shim-iframe {
  display: block;
}

header ul.menu li.parent:hover .iframeshim-container .content-container {
  display: block;
}

HTML:

<div class="container maincontainer">
    <header class="clearfix">
        <nav>
            <ul class="menu" id="mainnav">
                <li><a href=".">Home</a></li>
                <li class="deeper parent"><a href="#">Test</a>
                    <div class="iframeshim-container">
                        <div class="content-container">
                            <ul>
                                <li><a href=".">Item 1</a></li>
                                <li><a href="/">Item 2</a></li>
                                <li><a href="/">Item 3</a></li>
                                <li><a href="/">Item 4</a></li>
                            </ul>
                        </div>
                        <iframe class="shim-iframe" frameborder="0" scrolling="no"></iframe>
                    </div>
                </li>
            </ul>
        </nav>
    </header>


    <section id="main" class="clearfix">
        <div id="content" class="clearfix" style="width: 910px;">
            <section id="maincontent">
                <APPLET CODE="myCode"></APPLET>
            </section>
        </div>
    </section>
</div>