Проблемы с высотой тега li

    <nav className={styles['menu']}>
        <ul className={styles["menu__list"]}>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>Profile</a
                ></li>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>Messages</a>
            </li>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>News</a>
            </li>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>Music</a>
            </li>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>Settings</a>
            </li>
        </ul>
    </nav>

Есть такое меню, но высота тега li слишком большая, как сделать её в зависимости от контента внутри, т.е. чтобы высота была как и тег a внутри? Иначе позиционирование по середине смотрится криво.

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-area: n;
  border-radius: 18px;
  height: 330px;
  text-align: center;
  background-color: #7da3a1;
}

.menu__list-link {
  font-size: 18px;
  line-height: 120%;
  text-decoration: none;
  color: #fff;
  transition: 0.5s all;
}

.menu__list-link:hover {
  color: #324851;
  transition: 0.5s all;
}