Как заставить тег React Component Link охватить 100% тега li?

Question

По какой-то причине мой тег `не растягивается до 100% моего тега li.

Вот CSS у меня для этого раскрывающегося меню

    .dropdown-menu {
      background: red;
      width: 200px;
      position: absolute;
      top: 80px;
      list-style: none;
    }

    .dropdown-menu li {
      background: #ff3734;
      padding: 16px;
      cursor: pointer;
    }
 

    .dropdown-link {
      background: lime;
      display: block;
      height: 100%;
      width: 100%;
    }

Здесь это мой раскрывающийся компонент, а className для тега Link - "dropdown-link"

      function Dropdown() {
        const [click, setClick] = useState(false);

        const handleClick = () => setClick(!click);

        return (
          <>
            <ul className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>
              {MenuItems.map((item, index) => {
                return (
                  <li key={index}>
                    <Link
                      className={item.cName}
                      to={item.path}
                      onClick={() => setClick(true)}
                    >
                      {item.title}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </>
        );
      }

введите описание изображения здесь

Вокруг лаймово-зеленого тега Link есть промежуток, и я не знаю, что это происходит?

Answer 1

Вроде из-за padding: 16px; в .dropdown-menu li.