Google adsense ad is overlapping my drop down menu - z-index

Question

In my website the Google adsense ad is overlapping my drop down menu even I tried to fix it by using z-index property. I applied ul z-index:99999 and Google adsense ad div -99999 z-index. But it doesn't make any difference. What will be the working solution? Here is my code:
HTML:
<div id="nav_bar"> <!-- NAV BAR STARTS -->
<ul id="nav"> <!-- NAV STARTS -->
<li><a class="active" href="providers">Providers</a>
<ul>
<li>Actrix</li>
<li>Digital Island</li>
<li>Farmside</li>
<li>Flip</li>
<li>Inspire</li>
<li>Maxnet</li>
<li>Orcon</li>
<li>Slingshot</li>
<li>Telecom</li>
<li>TelstraClear</li>
<li>Vodafone</li>
<li>Woosh</li>
<li>Xnet</li>
</ul>
</li>
<li>Compare</li>
<li>Reviews</li>
<li>Contact Us</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

try using only id of top hierarchy and set position to relative
#nav_bar {
position: relative;
z-index : 999999;
}