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属性以指定堆栈顺序。

响应式菜单隐藏在广告中

1 个答案: