为什么向 CSS 下拉菜单添加粘性会破坏它？

Question

有很多类似的例子，但是none我发现可以处理这个问题。我正在尝试使带有下拉菜单的

栏具有粘性。我有一个包含许多菜单条目的

栏，但我尽可能地简化了它以查看它在哪里中断。 w3schools 有一个简单的例子，稍微修改了一下，我一添加 position:sticky 它就停止工作（你可以看到它在下面被注释掉了）
因此，为了实用性，一个文件中的示例代码是：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 28px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
/*  position: -webkit-sticky; /* Safari */
/*  position: sticky; */  /* If enabled it breaks dropdown menu */
  top: 0;
}

li {
  float: left;
}

li a, .mDrop {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.mDrop li:nth-of-type(-n+1) { float: down; }
.mDrop {
    position: relative;
    top:    13.6rem;

}

li .mDrop {
  visibility: hidden;
  opacity: 0;
  width: 8rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1.5rem;
  display: none;
}

li a:hover, .mDrop:hover .li:hover {
  background-color: green;
}

li:hover > ul,
li:focus-within > ul,
li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {   clear: both; width: 100%; }

.active {  background-color: #4CAF50;   }
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a>
  <ul class="mDrop">
    <li><a href="#news">Drop1</a></li>
    <li><a href="#news">Drop2</a></li>
    <li><a href="#news">Drop3</a></li>
  </ul>
  </li>  
  <li><a href="#contact">Contact</a></li>
    <li style="float:right"><a href="#help">Help</a></li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling. </p>
<div style="Height:80vh"></div>
<p>Some text to enable scrolling. </p>

</body>
</html>

我尝试了很多不同的选项示例，但都没有成功。我不想将整个内容区域封装在单独的

中，只是想增加工作下拉菜单的粘性。我也只想要 CSS/HTML 的解决方案。
谢谢

Answer 1

您的下拉菜单已损坏，因为您将 position: sticky 赋给了 ul 标签。由于您的代码中有两个嵌套的 ul，因此该样式将应用于它们。

<ul> <!-- first ul -->
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a>
        <ul class="mDrop"> <!-- second ul -->
            ...
        </ul>
    </li>  
    ...
    ...
</ul>

解决方案

首先，将 ul（导航栏）包裹在 <nav> 元素中。不要害怕“添加另一个 div”。这使您 HTML 代码更具语义和可读性，无需说它对 SEO 也有好处。

 <nav class="navbar">
    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a>
        <ul class="mDrop">
          <li><a href="#news">Drop1</a></li>
          <li><a href="#news">Drop2</a></li>
          <li><a href="#news">Drop3</a></li>
        </ul>
      </li>
      <li><a href="#contact">Contact</a></li>
      <li style="float:right"><a href="#help">Help</a></li>
    </ul>
  </nav>

从您的 CSS 中删除这些部分：

ul {
    position: -webkit-sticky; /* remove */
    position: sticky; /* remove */
    top: 0; /* remove */
}

将这些添加到您的 CSS：

.navbar {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

li .mDrop {
  visibility: hidden;
  opacity: 0;
  width: 8rem;
  position: absolute;
  top: 40px; /* I just added these line. Replace 40px with any value that fits your design */
  transition: all 0.5s ease;
  margin-top: 1.5rem;
  display: none;
}

我主要做的是改变您“设计”元素的方式。永远不要使用像 (h1, h2, p, ul) 这样的“纯”或“元素”选择器，除非你真的想做一些通用的样式；例如，重置浏览器默认样式。

完整代码

body {
  font-size: 28px;
}

.navbar {
  position: -webkit-sticky; /* Safari */
  position: sticky; /* If enabled it breaks dropdown menu */
  top: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.mDrop {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.mDrop li:nth-of-type(-n + 1) {
  float: down;
}
.mDrop {
  position: relative;
  top: 13.6rem;
}

li .mDrop {
  visibility: hidden;
  opacity: 0;
  width: 8rem;
  position: absolute;
  top: 40px;
  transition: all 0.5s ease;
  margin-top: 1.5rem;
  display: none;
}

li a:hover,
.mDrop:hover .li:hover {
  background-color: green;
}

li:hover > ul,
li:focus-within > ul,
li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}

.active {
  background-color: #4caf50;
}

<body>

  <div class="header">
    <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <nav class="navbar">
    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a>
        <ul class="mDrop">
          <li><a href="#news">Drop1</a></li>
          <li><a href="#news">Drop2</a></li>
          <li><a href="#news">Drop3</a></li>
        </ul>
      </li>
      <li><a href="#contact">Contact</a></li>
      <li style="float:right"><a href="#help">Help</a></li>
    </ul>
  </nav>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling. </p>
  <div style="Height:80vh"></div>
  <p>Some text to enable scrolling. </p>

</body>

为什么向 CSS 下拉菜单添加粘性会破坏它？

Why adding sticky to CSS drop down menu breaks it?

css

sticky

drop-down-menu

解决方案

完整代码