Javascript JS/CSS-函数openNav（）在主页上不起作用（仅限）

由于某些原因，此元素（菜单元素）在网站（xxxxxxxxxxxxxxxxxx.com）上不可点击，但仅在主页上可点击

该元素在其他页面和编辑器中工作得非常好

我不知道是什么原因导致它在主页上断裂

我正在使用Chrome的调试器进行检查，但我仍然没有发现问题，更不用说如何修复它了

Q:此问题的可能原因是什么？您认为什么是解决问题的良好起点

网站：

www.somewhatmystical.com

菜单元素：

身体{
字体系列：“Lato”，无衬线；
}
* {
框大小：边框框；
}
.专栏1{
颜色：白色；
浮动：左；
宽度：50%；
左侧填充：200px；
右边填充：100px；
填充顶部：200px；
文本对齐：右对齐；
字体大小：50px；
身高：575px；
右边框：1px纯色灰色；
背景色：黑色；
}
.专栏2{
颜色：白色；
浮动：对；
宽度：50%；
文本对齐：左对齐；
填充：10px；
字体大小：22px；
左侧填充：100px；
填充顶部：150px；
文字装饰：无；
身高：575px；
背景色：黑色；
}
a:链接{
颜色：白色；
}
a:悬停{
颜色：#C0A539；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.覆盖{
高度：0px；
宽度：100%；
位置：固定；
排名：0；
z指数：1；
排名：0；
左：0；
底部：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0）；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
颜色：#FFFFFF；
}
.覆盖{
填充：8px；
文字装饰：无；
颜色：#FFFFFF；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#C0A539；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.覆盖{
字号：20px
}
.overlay.closebtn{
字体大小：40px；
顶部：15px；
右：35px；
}
}
欢迎来到我们的在线艺术之旅。您可以阅读我们的想法，也可以写信给我们






菜单
函数openNav（）{
document.getElementById（“myNav”）.style.height=“100%”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.height=“0”；
}

它是可裁剪的。它在函数中的作用是关于显示。您可以更改显示高度，但也应该尝试更改菜单子元素中的样式

<script>
            function openNav() {
                document.getElementById("myNav").style.display= "contents";
            }

            function closeNav() {
                document.getElementById("myNav").style.height = "none";
            }
        </script>

函数openNav（）{
document.getElementById（“myNav”）.style.display=“contents”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.height=“无”；
}

它是可裁剪的。它在函数中的作用是关于显示。您可以更改显示高度，但也应该尝试更改菜单子元素中的样式

<script>
            function openNav() {
                document.getElementById("myNav").style.display= "contents";
            }

            function closeNav() {
                document.getElementById("myNav").style.height = "none";
            }
        </script>

函数openNav（）{
document.getElementById（“myNav”）.style.display=“contents”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.height=“无”；
}

将其放入

div

中，并使用

位置：绝对值将div定位在右上角，然后将
onclick
侦听器添加到该div中。确保它具有
宽度
和
高度

要确认它正在单击，您可以设置一个
控制台。log
作为初始事件处理程序函数。
将其放入
div
中，并使用
position:absolute
将div定位在右上角，然后将
onclick
侦听器添加到其中。确保它具有
宽度
和
高度

要确认它正在单击，可以将控制台.log设置为初始事件处理程序函数。
问题是：

另一个元素使用“.overlay”类，它与菜单元素“.overlay”类冲突

我只是将不同的类重命名为“.overlay1”


感谢JBis指出了这一点
问题是：

另一个元素使用“.overlay”