Hidden content appears on page refresh, what should I do?

Question

css

The bottom line is this:
When I refresh a page or follow links, I get hidden pages.

html

<?php if (isset($_SESSION['logged_user'])) : ?>
        <div class="prfileWrap">
          <ul class="profile-item">
            <a href="" onclick="return false;"><i class="fa fa-user-circle" aria-hidden="true"></i></a>
            <ul class="sub-profile">
              <li><a href="">Мои товары</a></li>
              <li><a href="">Выйти</a></li>
            </ul>
          </ul>
        </div>
      <?php endif; ?>

css

.prfileWrap {
  margin-top: -50px;
  margin-left: 87%;
  position: absolute;
  text-align: center;
}

.prfileWrap i {
  font-size: 25px;
  color: black;
}

.sub-profile {
  list-style: none;
}

When adding

display none

menu does not appear on click

const elementsProfile = document.getElementsByClassName('profile-item');
for (i = 0; i < elementsProfile.length; i++){
  elementsProfile[i].addEventListener('mousedown', showMenu);
  elementsProfile[i].addEventListener('mouseleave', hideMenu);
}

function showMenu(){
  if (this.children.length > 1) {
    this.children[1].style.height = 'auto';
    this.children[1].style.opacity = '1';
    this.children[1].style.overflow = 'visible';
  }
}

function hideMenu(){
  if (this.children.length > 1) {
    this.children[1].style.height = '0';
    this.children[1].style.opacity = '0';
    this.children[1].style.overflow = 'hidden';
  }
}