z-index - Google Adsense 广告与我的下拉菜单重叠

Question

在我的网站上，即使我尝试使用 z-index 属性修复它，Google Adsense 广告也与我的下拉菜单重叠。我申请了 ul z-index:99999和 Google Adsense 广告 div -99999 z-index .但这没有任何区别。什么是有效的解决方案？这是我的代码:

HTML:

<div id="nav_bar"> <!-- NAV BAR STARTS -->

    <ul id="nav"> <!-- NAV STARTS -->
        <li><a class="active" href="providers">Providers</a>
        <ul>
            <li><a href="actrix.html">Actrix</a></li>
            <li><a href="digital-island.html">Digital Island</a></li>
            <li><a href="farmside.html">Farmside</a></li>
            <li><a href="flip.html">Flip</a></li>
            <li><a href="inspire.html">Inspire</a></li>
            <li><a href="maxnet.html">Maxnet</a></li>
            <li><a href="orcon.html">Orcon</a></li>
            <li><a href="slingshot.html">Slingshot</a></li>
            <li><a href="telecom.html">Telecom</a></li>
            <li><a href="telstraclear.html">TelstraClear</a></li>
            <li><a href="vodafone.html">Vodafone</a></li>
            <li><a href="woosh.html">Woosh</a></li>
            <li><a href="xnet.html">Xnet</a></li>
        </ul>
        </li>
        <li><a href="compare">Compare</a></li>
        <li><a href="reviews">Reviews</a></li>
        <li><a href="contact">Contact Us</a></li>
    </ul> <!-- NAV ENDS -->

<div style="clear:both;"></div>

</div>

<div id="google_ad_banner">
<!--<img src="images/banner-ad.png" class="responsive" />-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle responsive-ad-unit-1"
    style="display:block"
    data-ad-client="ca-pub-xxxxxx"
    data-ad-slot="xxxxx"
    data-ad-format="horizontal">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

CSS:

#nav_bar ul li ul {
    display: none;
    z-index: 99999;
}

#google_ad_banner {
    z-index: -99999;
}

Answer 1

尝试仅使用顶级层次结构的 id 并将位置设置为相对

#nav_bar {
position: relative;
z-index : 999999;
}