Parent element over iframe in IE 7–9

The grotty technique you need to cover up iframe content with elements from the parent page. An iframe is positioned within a parent element and placed behind the child content.

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>
 </div>
</div>

<iframe id="pdf" width="100%" height="100%" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" width="200" height="200"></iframe>

CSS

#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;
}