如何使导航栏项目可点击，而不是整个导航栏本身

<nav>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<nav>
  <ul>
    <li onclick="navigateTo('home.html')">Home</li>
    <li onclick="navigateTo('about.html')">About</li>
    <li onclick="navigateTo('contact.html')">Contact</li>
  </ul>
</nav>

<script>
  function navigateTo(url) {
    window.location.href = url;
  }
</script>

<style>
  nav li {
    cursor: pointer;
  }
</style>

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>