Question

我正在为移动设备设置新菜单。一切设置都很好，但是单击任何菜单项后，它都不会关闭菜单和菜单覆盖。

有什么办法解决这个问题吗？

下面提供了我的CSS和HTML代码。

CSS


  margin-bottom:-7em;
}

@keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
#overlay-button {
  position: absolute;
  right: 2em;
  top: 3em;
  padding: 26px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
#overlay-button span {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: relative;
  display: block;
  transition: all 0.2s ease-in-out;
}
#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  content: "";
  transition: all 0.2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #fff;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked ~ #overlay {
  visibility: visible;
}

input[type="checkbox"]:checked ~ #overlay-button:hover span,
input[type="checkbox"]:checked ~ #overlay-button span {
  background: transparent;
}
input[type="checkbox"]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
  opacity: 1;
}
input[type="checkbox"]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

#overlay {
  height: 190vh;
  width: 100%;
  background: #ec6451;
  z-index: 2;
  visibility: hidden;
  position: fixed;
  left:0;
  top:0px;
}
#overlay.active {
  visibility: visible;
}
#overlay ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100vh;
  padding-left: 0;
  list-style: none!important;
}
#overlay ul li {
  padding: 1em;
  list-style: none;
  margin-left:-4%;
}
#overlay ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.5em;
}
#overlay ul li a:hover {
  color: #333332;

}

#overlay ul li a:click {
  display:none;
  background-color:transparent;
}

HTML

 <body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
  <div id="overlay" >
     <center> <img src="/wp-content/uploads/2019/06/logo-copy.png" class="logo-up" alt="Trulli" width="250" height=auto></center>
    <ul>

      <li><a href="#home">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</body>

请看看我的问题。谢谢你的回答。此代码已在平板电脑（而非移动设备）上经过测试。首先，我需要解决问题的方法。

Answer 1

您必须采取onclick动作来关闭悬停

移动设备：点击菜单项后隐藏菜单和菜单叠加

1 个答案: