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;
}