CSS 粘贴菜单时，粘贴菜单链接不起作用

Question

我正在尝试制作一个仅 CSS 的置顶菜单（没有 JavaScript）。向下滚动时，将鼠标悬停在菜单项上不再有效。我不确定为什么不。

CSS:

* {
  margin: 0;
  padding: 0;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

body {
  max-width: 960px;
  margin: auto;
}

.cont2 h1 {
  background: black;
  color: lightskyblue;
  padding: 10px;
}

.cont2 nav ul {
  list-style-type: none;
  background: lightskyblue;
  padding: 20px;
}

.cont2 nav ul li {
  display: inline-block;
}

.cont2 nav ul li a {
  text-decoration: none;
  padding: 20px;
  color: black;
  text-transform: uppercase;
}

.cont2 nav ul li a:hover {
  background: black;
  color: orange;
}

.sticky-nav {
  position: sticky;
  box-sizing: border-box;
  top: 0;
}

我不在这里发布 HTML，因为它太多了。

Answer 1

您需要将 z-index:1; 设置为 class .sticky-nav

这是更新后的代码段：

* {
  margin: 0;
  padding: 0;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

body {
  max-width: 960px;
  margin: auto;
}

.cont2 h1 {
  background: black;
  color: lightskyblue;
  padding: 10px;
}

.cont2 nav ul {
  list-style-type: none;
  background: lightskyblue;
  padding: 20px;
}

.cont2 nav ul li {
  display: inline-block;
}

.cont2 nav ul li a {
  text-decoration: none;
  padding: 20px;
  color: black;
  text-transform: uppercase;
}

.cont2 nav ul li a:hover {
  background: black;
  color: orange;
}

.sticky-nav {
  position: sticky;
  box-sizing: border-box;
  top: 0;
  z-index: 1;
}

<div class="container cont2">
  <h1> Main Heading </h1>

  <nav class="sticky-nav">
    <ul>
      <li><a href="#"> Page One </a></li>
      <li><a href="#"> Page Two </a></li>
      <li><a href="#contact"> Contact </a></li>
    </ul>
  </nav>
  <div class="row">
    <div class="col">
      <h2> LOREM IPSUM </h2>

      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col">
      <h2> LOREM IPSUM </h2>

      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="row" id="contact">
    <h2> CONTACT ME </h2>

    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

CSS 粘贴菜单时，粘贴菜单链接不起作用

CSS sticky menu links don't work when menu is stickied

css

jsfiddle

sticky