为什么我的列表不能互相叠加？

Question

我在网页顶部有一个固定的标题菜单栏。每个标题都是一个链接，但我想要第一个链接的下拉列表。下拉菜单的链接组件的行为异常，请参见图片：

我希望链接组件彼此堆叠，就像一个适当的下拉菜单一样。下面是我的代码：

当我运行代码片段时，它看起来是正确的，但是当我在Visual Studio中进行这些编码时，下面的代码看起来就像图像。

// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 1;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* List for header */
.navlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: black;
}

.navlist li {
  float: left;
}

.navlist a{
  display:block;
  padding:8px;
  transition:0.3s;
}

.navlist a:hover{
  background-color:rgba(255,255,255,0.3);
}

.navlist a[href="#Quiclinks"] {
  background-color: #fff;
  color: #000;
}

.navlist>li{
  position:relative;
}

<div id="navbar">
  <div class="dropdown">
    <ul class="navlist">
        <li>
          <a href="#news">Quicklinks<i class="fa fa-angle-double-down"></i></a>
          <div>
            <a href="#">All Documents</a>
            <a href="#">Divisional Websites</a>
            <a href="#">About</a>
          </div>
        </li>
        <li><a href="#news">Intro & News </a></li>
        <li><a href="#news">Programmes</a></li>
        <li><a href="#news">Benefits</a></li>
        <li><a href="#news">Location</a></li>
     </ul>
   </div>
</div>

Answer 1

这是因为您的CSS具有：

.navlist li {
  float: left;
}

只需将其删除并添加到.navlist a

  clear: both;
}

完整代码：

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 1;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* List for header */
.navlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: black;
}

/* just example */
.navlist div {
  margin-left: 1em;
}

.navlist a{
  display:block;
  padding:8px;
  transition:0.3s;
  /* adding :  ( work with -- float: left -- allready present in -- .navbar a  -- */
  clear: both;
}

.navlist a:hover{
  background-color:rgba(255,255,255,0.3);
}

.navlist a[href="#Quiclinks"] {
  background-color: #fff;
  color: #000;
}

.navlist>li{
  position:relative;
}

<link rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
    crossorigin="anonymous">

<div id="navbar">
  <div class="dropdown">
    <ul class="navlist">
      <li>
        <a href="#news">Quicklinks <i class="fa fa-angle-double-down"></i></a>
        <div>
          <a href="#">All Documents</a>
          <a href="#">Divisional Websites</a>
          <a href="#">About</a>
        </div>
      </li>
      <li><a href="#news">Intro & News </a></li>
      <li><a href="#news">Programmes</a></li>
      <li><a href="#news">Benefits</a></li>
      <li><a href="#news">Location</a></li>
    </ul>
  </div>
</div>

Answer 2

<div id="navbar">
  <div class="dropdown">
    <ul class="navlist">
        <li>
          <div className="linkWrapper">
          <a href="#news">Quicklinks<i class="fa fa-angle-double-down"></i></a>
          </div>
          <div>
            <a href="#">All Documents</a>
            <a href="#">Divisional Websites</a>
            <a href="#">About</a>
          </div>
        </li>
        <li><a href="#news">Intro & News </a></li>
        <li><a href="#news">Programmes</a></li>
        <li><a href="#news">Benefits</a></li>
        <li><a href="#news">Location</a></li>
     </ul>
   </div>
</div>

// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 1;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* List for header */
.navlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: black;
}

.navlist li {
  float: left;
}

.navlist a{
  display:block;
  padding:8px;
  transition:0.3s;
}

.linkWrapper a:first-child {
  display:block;
} 

.navlist a:hover{
  background-color:rgba(255,255,255,0.3);
}

.navlist a[href="#Quiclinks"] {
  background-color: #fff;
  color: #000;
}

.navlist>li{
  position:relative;
}

Answer 3

删除浮动子菜单项的添加

.navlist li div a {
  float: none;
}

// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 1;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* List for header */
.navlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: black;
}

.navlist li {
  float: left;
}
.navlist li div a {
  float: none;
}

.navlist a{
  display:block;
  padding:8px;
  transition:0.3s;
}

.navlist a:hover{
  background-color:rgba(255,255,255,0.3);
}

.navlist a[href="#Quiclinks"] {
  background-color: #fff;
  color: #000;
}

.navlist>li{
  position:relative;
}

<div id="navbar">
  <div class="dropdown">
    <ul class="navlist">
        <li>
          <a href="#news">Quicklinks<i class="fa fa-angle-double-down"></i></a>
          <div>
            <a href="#">All Documents</a>
            <a href="#">Divisional Websites</a>
            <a href="#">About</a>
          </div>
        </li>
        <li><a href="#news">Intro & News </a></li>
        <li><a href="#news">Programmes</a></li>
        <li><a href="#news">Benefits</a></li>
        <li><a href="#news">Location</a></li>
     </ul>
   </div>
</div>

Answer 4

更新

您的代码段已经设置了指向display: block的链接，并且可以按预期运行，您的问题似乎来自其他地方，也许css覆盖了项目中其他地方的内容？

.navlist a{
  display:block;
  padding:8px;
  transition:0.3s;
}

原始答案

您使用的是a标签，默认情况下它们是内联显示的，您可以将a的样式添加到display: block或使用列表：

<a href="#news">Quicklinks<i class="fa fa-angle-double-down"></i></a>
<ul>
  <li><a href="#">All Documents</a></li>
  <li><a href="#">Divisional Websites</a></li>
  <li><a href="#">About</a></li>
</ul> 

您可能希望将此列表设为无样式以避免出现点。

也要表现得像一个适当的下拉菜单，此列表应在第一个渲染器上隐藏，并且您将使用另一个js函数（在“快速链接”链接上监听click事件）来触发可见性。像

var button = document.getElementById("dropdownButton");
var menu = document.getElementById("dropdownMenu");

button.addEventListener("click", function(e) {      
  menu.classList.toggle("hidden");
});
  

 .hidden {
  display: none;
}

<a href="#" id="dropdownButton">Quicklinks</a>
<ul id="dropdownMenu" class="hidden">
  <li><a href="#">All Documents</a></li>
  <li><a href="#">Divisional Websites</a></li>
  <li><a href="#">About</a></li>
</ul>