下拉菜单不会显示 CSS

Question

我正在关注 weSchools 中的这个 guide，以便在我的导航栏中制作一个下拉菜单。

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

我试过 display: block 切换 on/off 但是下拉菜单没有出现，就像 w3school 教程一样。

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

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

.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

浮动属性将元素从正常流中取出。

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.

所以，您的 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;
}

下拉菜单不会显示 CSS

Dropdown menu won't show with CSS

html

css

navigation

menu

dropdown