Here is the html

```
<ul class="menu__box d-flex flex-column " id="menu-ul">
        <div class="menu-title-container d-flex align-items-center justify-content-center">
      <p class="menu-title">Most Popular</p>
      </div>

            <li><a class="menu__item" href="#">Batteries</a></li>
            <li><a class="menu__item" href="#">Engine Oil</a></li>
            <li><a class="menu__item" href="#">Spark Plugs</a></li>
            <li><a class="menu__item" href="#">Tyres</a></li>
            <li><a class="menu__item menu-hidden" href="#">ATF</a></li>
            <li><a class="menu__item menu-hidden" href="#">Rims</a></li>
            <li><a class="menu__item menu-hidden" href="#">MOBIS Hyundai</a></li>
            <li class="menu-btn-expand"><a class="menu__item" href="#" id="showMore">Show More</a></li>

            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Shop Deals</p>
            </div>

            <li><a class="menu__item" href="#">Top Deals</a></li>

            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Shop By</p>
            </div>

            <li><a class="menu__item" href="#">By Make</a></li>
            <li><a class="menu__item" href="#">By Model</a></li>

            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Trustworthy Advice</p>
            </div>
              <li><a class="menu__item" href="#">Advice & How to's</a></li>
             <li><a class="menu__item" href="#">Find Us</a></li>
             <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Contact Us</p>
            </div>
              <li><a class="menu__item" href="#">Contact</a></li>   

    </ul>

  </div>

        </div>

```

Here is the CSS

```
#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: relative;
  top: -1rem;
  left: 3rem;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 5px;

  background-color: #616161;

  transition-duration: 0.25s;
}
.menu__btn > span::before {
  content: "";
  top: -8px;
}
.menu__btn > span::after {
  content: "";
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  left: -100%;
  width: 300px;
  height: 70%;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  background-color: #fff;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
  border-right: 1px solid black;
  border-top: 1px solid black;
  overflow: auto !important;
  transition-duration: 0.25s;
}

.menu__box li a {
  font-size: 0.8rem;
  font-family: "Poppins";
}

.menu__item {
  display: block;
  padding: 12px 24px;

  color: #333;

  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 600;

  text-decoration: none;
  border-top: none;

  transition-duration: 0.25s;
}
.menu__item:hover {
  background-color: #f5f5f5;
}

.menu-line-break {
  background-color: #f5f5f5;
  width: 3rem;
  height: 0.2rem;
  margin: 0.5rem auto;
}

.menu-btn-expand {
  text-decoration: underline;
}

.menu-title-container {
  width: 100%;
}

.menu-hidden {
  display: none;
}

```

The Javascript

```
let showMore = document.querySelector('#showMore');

showMore.addEventListener('click' , () => {
  let hiddenLi = document.querySelectorAll('.menu__item');

  hiddenLi.classList.remove("menu-hidden")
})

```

The initial li with the class of menu-hidden is put on display none . However , when i am removing the class as seen in my code the li still do not show. What's the solution , I appreciate the help . I am kind of new to this so I might be making a silly mistake i do not know.