我用CSS和HTML创建了一个移动的导航菜单，它使用复选框技巧来打开和关闭菜单。我遇到的问题是，当你打开菜单并单击.menu-content部分（UL）中的任何位置时，它只是折叠菜单。我不知道为什么会发生这种情况。它应该只在你单击.menu-icon span时折叠菜单。这是我的codepen：https://codepen.io/QuantumCelestial/pen/GRzrGJG
下面是我的HTML和CSS：

.mobile-nav {
  display: revert;
}
/* Rounded corner style for collapsed menu display */
.menu-wrap .menu-icon {
  position: fixed;
  right: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #26877f;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 0 #26877f, 0 0 0 0 #26877f;
  cursor: pointer;
}
/* Hamburger menu icon (Middle Line) */
.menu-wrap .hamburger {
  position: absolute;
  top: 135px;
  left: 50px;
  width: 30px;
  height: 2px;
  background: #69d2e7;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

/* Create Top and Bottom Lines & move top line up */
.menu-wrap .hamburger::after,
.menu-wrap .hamburger::before {
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  content: "";
  position: absolute;
  /* top: -10px; */
  display: block;
  width: 100%;
  height: 100%;
  background: #69d2e7;
}
/* Move top line up */
.menu-wrap .hamburger::before {
  top: -10px;
}
/* Move bottom line down */
.menu-wrap .hamburger::after {
  bottom: -10px;
}
/* Remove input checkbox from display */
.menu-wrap .toggler {
  display: none;
}
/* Create expanded view/growing circle effect */
.menu-wrap .toggler:checked + .menu-icon {
  box-shadow: 0 0 0 100vw #26877f, 0 0 0 100vh #26877f;
  border-radius: 0;
  /* Change toggler box dimensions to fit the X */
  width: 50px;
  height: 50px;
  right: 0;
  top: 0;
}
/* Reposition icon after box dimensions are resized */
.menu-wrap .toggler:checked + .menu-icon .hamburger {
  top: 36px;
  left: 0px;
}
/* Rotate lines */
.menu-wrap .toggler:checked + .menu-icon .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Rotate bottom line */
.menu-wrap .toggler:checked + .menu-icon .hamburger::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
}
/* Rotate top line */
.menu-wrap .toggler:checked + .menu-icon .hamburger::before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  opacity: 0; /* Added so one line isn't thicker than the other */
}
/* Styling for expanded menu content */
.menu-wrap .menu-content {
  font-size: 3rem;
  list-style-type: none;
  line-height: 1.6;
  transition: all 15s ease-in;
  visibility: hidden;
  z-index: 200;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(75%, -150%) scale(0);
  transform: translate(75%, -150%) scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  /* transition: all 0.4s ease; */
}
/* Show menu content when nav is expanded */
.menu-wrap .toggler:checked ~ .menu-content {
  visibility: visible;
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
/* Styling for the nav links */
.menu-wrap a {
  margin-bottom: 1em;
  display: block;
  color: #69d2e7;
  text-decoration: none;
}

个字符