javascript - 为什么我的列表没有堆叠在一起？

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

<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;
}