0
我正在制作一个电子邀请网站。已经做了一切,但只停留在一个地方。 桌面视图的菜单工作正常,但在移动设备上打开时不工作。我点击菜单按钮没有任何反应。请在屏幕截图下方找到。移动视图网站菜单
HTML
<body>
<div id="container" class="container intro-effect-push animsition" style="animation-duration: 1500ms; opacity: 1;">
<nav id="main_menu" class="menugray">
<div id="menu-button" class="menu-opened">
</div>
<ul class="open" style="display: none;">
<li><a class="fade-page" href="index2.html"><span data-hover="HOME">HOME</span></a></li>
<li> <a class="fade-page" href="knowus.html"><span data-hover="BRIDE & GROOM">BRIDE & GROOM</span></a>
</li>
<li><a href="events.html" class="fade-page"><span data-hover="EVENTS">EVENTS</span></a></li>
<li><a href="rspv.html" class="fade-page"><span data-hover="RSPV">RSPV</span></a></li>
<li><a href="photos.html" class="fade-page"><span data-hover="PHOTOS">PHOTOS</span></a></li>
</ul>
</nav>
CSS
#main_menu li a span::before {
position: absolute;
top: -100%;
color:#e76b71;
content: attr(data-hover);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#main_menu:after,
#main_menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-button {
position: absolute;
padding-left: 1.25em;
font-size:30px;
top:8px;
right:8px;
display: none;
cursor:pointer;
}
#menu-button:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 0.125em;
border-top: 0.375em double #333;
border-bottom: 0.135em solid #333;
}
截图
如果我更改代码以
<ul class="open" style="display: block;">
的初衷是显示:无
这个问题可能会要求一些时间。但请求某人帮助我。我会非常感谢。