Html 位于iFrame后面的导航菜单

特别是仅在IE9上，通过iframe查看PDF时，我的导航菜单位于iframe后面

我已经设置了一个JSFIDLE来演示：

或者，请参见此问题底部的代码

在IE9上查看时，如果您将鼠标悬停在导航元素上，可以看到的具有子导航的元素将隐藏在iFrame后面

我曾尝试将导航菜单的z索引设置为高于iFrame的z索引，但没有成功

如何解决此问题，使navigatino菜单的子菜单显示在iframe的顶部

HTML

---

我也尝试过使用PDFObject.js。它不起作用

您尝试过空iframe技术吗？ 它以前不工作，因为您需要在每个子菜单ul标记中添加一个空iframe

HTML

<div id="outer">
<div id="inner">
    <div id="navMenu">    
        <ul id="menu">
            <li>
                <a href="#">Menu 1</a>
            </li>
            <li><a href="#">Menu 2</a>
                <ul class="sub-menu">
                    <iframe class="cover" src="about:blank"></iframe>

                    <li>
                        <a href="#">Sub Menu 1</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 2</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 3</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 4</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Menu 3</a>

            </li>
            <li><a href="#">Menu 4</a>

                <ul class="sub-menu">
                     <iframe class="cover" src="about:blank"></iframe>

                    <li>
                        <a href="#">Sub Menu 1</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 2</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 3</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 4</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 5</a>
            </li>
       </ul>
 </div>

示例

---

尝试将位置和z索引添加到

#菜单

或

#导航菜单

ul#menu {
    position: relative;
    z-index: 9999;
}

---

我没有IE9来检查，但我已经使用google文档代码通过iframe嵌入到网站中

我添加了JSFIDLE链接，您可以直接在ie9中查看

-直接在ie9中检查此项

如果您使用google文档作为iframe，那么请确保它是公开共享的

<div id="navMenu">
<ul id="menu">
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 5</a>
    </li>
</ul>
</div>
<br />
<div id="iframe">
    <!--<iframe name="myiFrame" width="100%" height="100%" title="My iFrame" id="myIframe" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" frameBorder="0"/>-->
   <iframe src="https://docs.google.com/file/d/0ByF4RjDx3q6sMW9DWHR0MXNtN0k/preview" width="100%" height="100%"></iframe> 
</div>

---

关于D.

Hmm，有趣的是，

z-index的变化不起作用。我想知道使用此方法是否允许您对
ul
标签进行
z-index
索引：可能与我看到的重复，但解决方案不起作用。这是一个简单的div，这是一个下拉导航菜单。我想知道它是否像一个flash对象，谷歌类似于
wmode-iframe
，我把div放在具有类似属性的flash对象上。可能会成功。仅供参考，我只是尝试了pdfobject的想法。没用。如果我在ie9上访问您的JSFIDLE，它仍然具有相同的功能problem@AlexIncarnati不错，+1
  #outer {
    position: relative;
    left:0;
    top: 0;
    width: 100%;    
    z-index: 3;
}

    #inner{
        background: red;
    }

    .cover {
        position: absolute;
        border: none;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -2;
        height:100%;
    }

#pdf {
    position: relative;
    top:0;
    z-index: 1;
}

ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
    z-index:3;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}

/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}

/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}

/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
    z-index:3;
}

ul#menu li:hover ul.sub-menu {
    display:block;
    position:absolute;
    z-index:3;
}

ul#menu {
    position: relative;
    z-index: 9999;
}

<div id="navMenu">
<ul id="menu">
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 5</a>
    </li>
</ul>
</div>
<br />
<div id="iframe">
    <!--<iframe name="myiFrame" width="100%" height="100%" title="My iFrame" id="myIframe" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" frameBorder="0"/>-->
   <iframe src="https://docs.google.com/file/d/0ByF4RjDx3q6sMW9DWHR0MXNtN0k/preview" width="100%" height="100%"></iframe> 
</div>