下拉菜单不会与 CSS 一起显示

Question

我正在关注来自 weSchools 的 guide，以便在我的导航栏中创建一个下拉菜单。

我的问题是它不会显示，除非我从 ul 类中删除 CSS 属性 overflow: hidden。这会破坏页面的布局并删除背景颜色等。

我已经尝试打开/关闭display: block，但下拉菜单并没有出现，就像 w3school 教程一样。

我认为直接在 CSS 中使用自定义类 .sticky 而不是 ul 可能存在一些问题，它是继承还是不继承某些东西？

这是我的 HTML/CSS。我已经多次查看它以与 w3schools 示例进行比较，除了ul 标签之外找不到其他区别。如果我从ul 导航列表中删除.sticky，那么它会丢失格式并影响页脚处的另一个ul。所以我需要为这个标题导航列表定义一个自定义类。

.sticky {
    /*float: right;*/
    /*color: white;*/
    list-style-type: none;
    /*width: 100%;*/
    margin: 0;
    padding: 0;
    overflow: hidden;

    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 2;
}

li {
    float: right;
    /*padding-right: 20px;*/
    /*padding-left: 20px;*/
    color: white;
}

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

    font-family: monospace;
    border-bottom: 2px solid #333;
    /*margin-bottom: 10px;*/
}

li a:hover, .dropdown:hover .dropBtn {
    /*background-color: #454542;*/
    text-decoration: none;
    color: white;
    /*border-radius: 10%;*/
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content{
    display: block;
    /*border-bottom: 2px solid #fff922;*/
}

li a:active {
    /*background-color: deeppink;*/
    /*    add some transition here */
}

<ul class="sticky">
    <li><a class="active" href="#contact">Contact</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#about">About</a></li>
    <li class="dropdown">
            <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
            <div class="dropdown-content">
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
            </div>
    </li>
    <li><a href="#home">Home</a></li>
</ul>

Answer 1

从选择器中删除position:sticky;，sticky 是一个关键字，所以我将其更改为Links 以供参考。

.Links {
  /*float: right;*/
  /*color: white;*/
  list-style-type: none;
  /*width: 100%;*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  background-color: #333;
  top: 0;
  z-index: 2;
}

li {
  float: right;
  /*padding-right: 20px;*/
  /*padding-left: 20px;*/
  color: white;
}

li a,
.dropBtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: monospace;
  border-bottom: 2px solid #333;
  /*margin-bottom: 10px;*/
}

li a:hover,
.dropdown:hover .dropBtn {
  /*background-color: #454542;*/
  text-decoration: none;
  color: white;
  /*border-radius: 10%;*/
  padding: 14px 16px;
  border-bottom: 2px solid #fff922;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color: red;
}

.dropdown-content a:hover {
  background-color: red;
}

.dropdown:hover .dropdown-content {
  display: block;
  /*border-bottom: 2px solid #fff922;*/
}

<ul class="Links">
  <li><a class="active" href="#contact">Contact</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#about">About</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
    </div>
  </li>
  <li><a href="#home">Home</a></li>
</ul>

Answer 2

当然它可以是粘性的；）

.sticky {
  /* float: right; */
  /* color: white; */
  list-style-type: none;
  /* width: 100%; */
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  border-radius: 0 0 10px 10px;
  background-color: #333;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
}

li {
  float: right;
  /*padding-right: 20px;*/
  /*padding-left: 20px;*/
  color: white;
}

li a,
.dropBtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: monospace;
  border-bottom: 2px solid #333;
  /*margin-bottom: 10px;*/
}

li a:hover,
.dropdown:hover .dropBtn {
  /*background-color: #454542;*/
  text-decoration: none;
  color: white;
  /*border-radius: 10%;*/
  padding: 14px 16px;
  border-bottom: 2px solid #fff922;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
  /*border-bottom: 2px solid #fff922;*/
}

li a:active {
  /*background-color: deeppink;*/
  /*    add some transition here */
}

<ul class="sticky">
  <li><a class="active" href="#contact">Contact</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#about">About</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
    </div>
  </li>
  <li><a href="#home">Home</a></li>
</ul>

test <br> test <br> test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test
<br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test
<br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test
<br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>

Answer 3

问题是您正在制作li 元素float: right

float 属性使元素脱离正常流程。

float CSS 属性将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素已从页面的正常流程中移除，但仍是流程的一部分。

因此，您的ul 在渲染时实际上没有任何高度，因此会导致此问题。只需从 li 样式规则中删除 float 并使其成为 display: inline-block。

.sticky {
    /*float: right;*/
    /*color: white;*/
    list-style-type: none;
    /*width: 100%;*/
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 2;
}

li {
    display:inline-block;
    color: white;
}

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

    font-family: monospace;
    border-bottom: 2px solid #333;
    /*margin-bottom: 10px;*/
}

li a:hover, .dropdown:hover .dropBtn {
    /*background-color: #454542;*/
    text-decoration: none;
    color: white;
    /*border-radius: 10%;*/
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    background: #000;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content{
    display: block;
    /*border-bottom: 2px solid #fff922;*/
}

li a:active {
    /*background-color: deeppink;*/
    /*    add some transition here */
}

<ul class="sticky">
    <li><a class="active" href="#contact">Contact</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#about">About</a></li>
    <li class="dropdown">
            <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
            <div class="dropdown-content">
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
            </div>
    </li>
    <li><a href="#home">Home</a></li>
</ul>

Answer 4

已完全修复，包括样式：https://jsfiddle.net/L9nw5et0/

.sticky {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

li {
    float: right;
    color: white;
    margin: 0;
}

li a,
.dropBtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: monospace;
    padding-bottom: 16px;
}

li a:hover,
.dropdown:hover .dropBtn {
    text-decoration: none;
    color: white;
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 12px 16px;
    border-radius: 0 0 10px 10px;
}

.dropdown-content a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: block;
}