如何创建带有锚点的下拉菜单？

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>

<section id="section1">
  <h2>Section 1</h2>
  <p>Content of section 1...</p>
</section>

<section id="section2">
  <h2>Section 2</h2>
  <p>Content of section 2...</p>
</section>

<section id="section3">
  <h2>Section 3</h2>
  <p>Content of section 3...</p>
</section>

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

section {
  margin-top: 50px;
}