Disparition du text en ccs des qu' il est cliquée sur un bouton

Signaler
-
bonjour, j'ai un problème avec mon code car c'est la position relative qui ne fait pas disparaitre le text
voici mon code
html
<!DOCTYPE html>
<html>
 <head>
 <link rel="stylesheet" type="text/css" href="rond.css">
  <style>
 .fond{
    background-image: url("fond.png");
    background-repeat: repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size: 100%;
}
   input {
  display: none;
}

.open {
  background-color:white;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  top: 8px;
}

.open:before {
  content: "";
  background-color:white;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: -8px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.open:after {
  content: "";
  background-color:white;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: 4px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.menuOpen {
  width: 24px;
  height: 20px;
  display: block;
  padding: 15px;
  cursor: pointer;
  float: right;
}

.menuOpen:hover .open:before {
  top: -9px;
}

.menuOpen:hover .open:after {
  top: 5px;
}

.menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-image: url(fond.png);
}

.menu label {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-size: 100%;
  cursor: pointer;
}

.menu .menuContent {
  position: relative;
  top: 50%;
  font-size: 54px;
  text-align: center;
  padding-bottom: 20px;
  margin-top: -170px;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.menu ul li a {
  display: block;
  color: white;
  text-decoration: none;
  transition: color 0.2s;
  font-family: Trebuchet MS;
  text-transform: uppercase;
  padding: 10px 0;
}

.menu ul li a:hover {
  color: black;
}

.menu ul li:hover {
  background: white;
}

.menuEffects {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.menuEffects ul {
  transform: translateY(0%);
  transition: all 0.5s;
}

#menuToggle:checked ~ .menuEffects {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;

}

#menuToggle:checked ~ .menuEffects ul {
  opacity: 1;
}

#menuToggle:checked ~ .menuOpen .open {
  background-color: transparent;
}

#menuToggle:checked ~ .menuOpen .open:before {
  content: "";
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:checked ~ .menuOpen .open:after {
  content: "";
  background-color: white;
  transform: rotate(-45deg);
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:not(:checked) ~ .menuEffects ul {
  transform: translateY(-30%);
}
    </style>
 </head>
<body class="fond">
<div id="menuArea">
  <input type="checkbox" id="menuToggle"></input>

<label for="menuToggle" class="menuOpen">
  <div class="open"></div>
</label>

<div class="menu menuEffects">
  <label for="menuToggle"></label>
  <div class="menuContent">
    <ul>
      <li><a href="#">accueil</a></li>
      <li><a href="#">travaux en cours</a></li>
    </ul>
  </div>
</div>
</div>
<div class="container">
  
  <header>
    <nav>
      <ul>

        <li>
          <a href="#">6eme</a>
        </li>

        <li>
          <a href="#">5eme</a>
        </li>

        <li>
          <a href="#">4eme</a>
        </li>

        <li>
          <a href="#">3eme</a>
        </li>

      </ul>
    </nav>
  </header>
  
</div>
 </body>

 </html>

css: 


*,*::before,*::after { 
      box-sizing: border-box; 
    } 
    body { 
      font-family: "Saira Extra Condensed", sans-serif; 
      letter-spacing: 1px; 
      -webkit-font-smoothing: antialiased; 
      -moz-osx-font-smoothing: grayscale; 
    } 
    .container:before { 
      display: flex; 
      flex-direction: column; 
      min-height: 100vh; 
    } 
    header { 
      text-align: center; 
      padding: 0.5rem 0 5rem; 
      font-size: 1.25rem; 
    } 
    ul { 
      list-style: none; 
      margin: 0; 
      padding: 0; 
    } 
    li { 
      display: inline-flex; 
    } 
     { 
      position:relative; 
      padding: 1rem 0 0.5rem; 
      margin: 0 1.5rem; 
      color: white; 
      text-decoration: none; 
      text-transform: uppercase; 
      display: inline; 
    } 
     a::after { 
      content: ""; 
      position: absolute; 
      left: 50%; 
      bottom: 0; 
      transform: translateX(-50%) scaleX(0); 
      transform-origin: 50% 50%; 
      width: 100%; 
      height: 1px; 
      background-color: rgba(255, 255, 255, 0.8); 
      transition: transform 250ms; 
    } 
     a:hover::after { 
      transform: translateX(-50%) scaleX(1); 
    }

Ajout des balises de code + remise en forme du code css