锚标签看似正确链接到 id 但无法正常工作

Question

我无法弄清楚为什么会这样，我的导航栏工作正常，锚点 links 本身是实际的 links，但是当我点击它们时页面重新加载或完全白屏。

这是页面的 link，仅包括 ul 本身和附加的 css

http://s.codepen.io/boomerang/7e523d9a7efa11d1199da37a32c176ac1483413552850/index.html

.menu {
  position: fixed;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, 0);
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3f2e38;
  border-radius: 0px 0px 30px 30px;
  box-shadow: 0px 2px 4px #3f2e38;
}
ul.menu li a {
  width: 100px;
  height: 40px;
  font-family: dosis;
  display: inline-block;
  color: #e6e1ea;
  text-align: center;
  transition: .3s;
  font-size: 20px;
}
ul.menu li {
  float: left;
}
ul.menu li a:hover {
  background-color: #59404f;
}
/*header text*/

.texttwo {
  font-family: dosis;
  font-size: 72px;
}

<header>
  <nav>
    <ul class="menu">
      <li><a href "#home">Home</a>
      </li>
      <li><a href "#gallery">Gallery</a>
      </li>
      <li><a href "#portfolio">Portfolio</a>
      </li>
      <li><a href "#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<div>
  <h1 class="texttwo" id="gallery">Gallery</h1>
</div>

<div>
  <h1 class="texttwo" id="portfolio">Portfolio</h1>
</div>

<div>
  <h1 class="texttwo" id="contact">Contact</h1>
</div>

Answer 1

您缺少 = 符号 <a href="#"></a>

.menu {
  position: fixed;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, 0);
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3f2e38;
  border-radius: 0px 0px 30px 30px;
  box-shadow: 0px 2px 4px #3f2e38;
}
ul.menu li a {
  width: 100px;
  height: 40px;
  font-family: dosis;
  display: inline-block;
  color: #e6e1ea;
  text-align: center;
  transition: .3s;
  font-size: 20px;
}
ul.menu li {
  float: left;
}
ul.menu li a:hover {
  background-color: #59404f;
}
/*header text*/

.texttwo {
  font-family: dosis;
  font-size: 72px;
}

<header>
  <nav>
    <ul class="menu">
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#gallery">Gallery</a>
      </li>
      <li><a href="#portfolio">Portfolio</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<div>
  <h1 class="texttwo" id="gallery">Gallery</h1>
</div>

<div>
  <h1 class="texttwo" id="portfolio">Portfolio</h1>
</div>

<div>
  <h1 class="texttwo" id="contact">Contact</h1>
</div>

锚标签看似正确链接到 id 但无法正常工作

Anchor tags seemingly linked to ids properly but not working

html

anchor

href

html-lists

nav