解决iframe中的二级菜单被遮盖的问题

解决iframe中的二级菜单被遮盖的问题

问题背景及描述

在我们开发的时候，经常会遇得到一些网站，头部和尾部一毛一样，这样头部尾部相同的网站，怎么都不可能把头部和尾部重新书写一遍吧，不仅浪费时间还显示的是自己的网站代码重复率比较多，显示自己没有水平。

所以需要我们经常会把这样重复的头部和尾部都单独提出来，制作成一个独立的网页，然后通过iframe框架进行引入。如果公共头部中有对应的一级导航和二级菜单导航的胡被遮住这可怎么解决呢？

各种网站和各种公众号上面方法使用了js，但是js比较麻烦，并且代码粘贴下来使用的时候会出现问题，跑不起来，接下来由我提供给你们一个简单快速高效的解决问题办法。那叫一个so easy；并且关键代码也给出了注释哟，值得你来查看。

问题代码

（一）公共头部----带有二级菜单

HTML源码

<!-- 这里是头部logo区域 -->
    <div class="box">这里是logo</div>
    <!-- 通栏和导航 -->
    <div class="layout">
        <ul>
            <li>你好
                <ul>
                    <li>你好1</li>
                    <li>你好2</li>
                    <li>你好3</li>
                </ul>
            </li>
            <li>我好
                <ul>
                    <li>我好1</li>
                    <li>我好2</li>
                    <li>我好3</li>
                    <li>我好4</li>
                </ul>
            </li>
            <li>大家好
                <ul>
                    <li>大家好1</li>
                    <li>大家好2</li>
                </ul>
            </li>
            <li>勇哥
                <ul>
                    <li>勇哥1</li>
                    <li>勇哥2</li>
                    <li>勇哥3</li>
                </ul>
            </li>
            <li>真的
                <ul>