css - 响应式菜单隐藏在广告中

Question

我的响应式菜单在 adsense 代码里面，这里是菜单的 css。我有一个响应式网站 www.idealbanker.in，但是当点击菜单时，它会进入 adsense 广告，请指导我解决它。

我的响应式菜单在 adsense 代码里面，这里是菜单的 css。我有一个响应式网站 www.idealbanker.in，但是当点击菜单时，它会进入 adsense 广告，请指导我解决它。我的响应式菜单在 adsense 代码中，这里是菜单的 css。我有一个响应式网站 www.idealbanker.in，但是当点击菜单时，它会进入 adsense 广告，请指导我解决它。 enter image description here

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}


</style>
<script type="text/javascript">
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
</script>

Answer 1

解决方案

ul.topnav.responsive {
    position:relative;
    z-index: 10;
}

添加z-index属性来指定堆叠顺序。