CSS/Javascript 下拉菜单问题

Question

大家好我是网页设计的新手，我目前正在设计一个网站，我试图在其中使用使用 CSS 和 Javascript 制作的下拉菜单。我几乎已经设法让一切正常工作，但唯一需要解决的问题是下拉菜单内容出现在容器的左侧，而不是相关父菜单选项的下方。

Screenshot

function myFunction1() {
  document.getElementById("myDropdown1").classList.toggle("show");
}

function myFunction2() {
  document.getElementById("myDropdown2").classList.toggle("show");
}

function myFunction3() {
  document.getElementById("myDropdown3").classList.toggle("show");
}

function myFunction4() {
  document.getElementById("myDropdown4").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content1");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn2')) {

    var dropdowns = document.getElementsByClassName("dropdown-content2");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn3')) {

    var dropdowns = document.getElementsByClassName("dropdown-content3");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn4')) {

    var dropdowns = document.getElementsByClassName("dropdown-content4");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.navbar {
  float: left;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  height: auto;
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
}

.navbar a {
  font-size: 2em;
  font-weight: 100;
  color: white;
  text-align: center;
}

.dropdown {
  width: 100%;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 16.667%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
  height: auto;
}

.dropdown-content1 a {
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  text-align: center;
  height: auto;
}

.dropdown-content1 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

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

.dropdown-content2 a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  font-size: 2em;
}

.dropdown-content2 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

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

.dropdown-content3 a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  font-size: 2em;
}

.dropdown-content3 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

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

.dropdown-content4 a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  font-size: 2em;
}

.dropdown-content4 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.show {
  display: block;
}

.btn1 {
  background-color: #71aace;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.btn1:hover,
.btn1:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn1 {
  background-color: #6c73b1;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn1:hover,
.dropbtn1:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn2 {
  background-color: #d3c530;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn2:hover,
.dropbtn2:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn3 {
  background-color: #82c845;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn3:hover,
.dropbtn3:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn4 {
  background-color: #8f65a1;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn4:hover,
.dropbtn4:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

<div class="navbar">

  <button class="btn1" value="About Us" onclick="window.location.href=" https://uklivesound.000webhostapp.com/aboutus.html>About Us</button>

  <div class="dropdown">
    <button class="dropbtn1" onclick="myFunction1()">Rehearsals</button>
    <div class="dropdown-content1" id="myDropdown1">
      <a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a>
      <a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn2" onclick="myFunction2()">Recording</button>
    <div class="dropdown-content2" id="myDropdown2">
      <a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a>
      <a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn3" onclick="myFunction3()">For Hire</button>
    <div class="dropdown-content3" id="myDropdown3">
      <a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a>
      <a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a>
      <a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a>
      <a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn4" onclick="myFunction4()">Other Services</button>
    <div class="dropdown-content4" id="myDropdown4">
      <a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a>
      <a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a>
    </div>
  </div>

  <button class="btn2" value="Contact Us" onclick="window.location.href=" https://uklivesound.000webhostapp.com/contact.html>Contact Us</button>

Answer 1

您需要为具有 class 名称下拉列表的列表项指定相对位置。

这不是对您自己的代码的编辑，但这里有一个示例，说明父子关系应如何与 CSS 中的下拉列表一起工作：

.dropdown-container {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-left: -100px;
}

Relevant JSFiddle

Answer 2

CSS class dropdown 的宽度设置为 100%，这意味着此父项中包含的所有 .dropdown-content1 元素都将具有完全相同的宽度，从完全相同的点开始。这就解释了为什么您会看到下拉菜单向左移动。

将您的 .dropdown class 更改为以下内容：

.dropdown {
    float: left;
}

您会注意到的第一件事是您所有的按钮都会变得有点滑稽。

这是因为内部 CSS classes dropbtn1 和 dropbtn2 等将它们的 width 设置为 16.667%。将这些宽度设置为 100%，您将开始看到下拉列表的行为方式更多 "as expected"。

Answer 3

您需要将 16% 宽度的元素更改为 .dropdown parent classes。然后将每个 dropdown-content class 设置为 parent 的 100%。您还需要将 parent 下拉菜单 class 设置为 position: relative 并将 child content classes 设置为 position: absolute 然后告诉浏览器将下拉菜单放在哪里parent（从 parent 向下 50 像素等）。

这是适合我的重写...

编辑：您的 "About" 和 "Contact Us" href link 符号中有一个错误，省略了引号。我还进一步简化了您的 Javascript 和 CSS，将许多元素和 classes 组合在一起，以便您了解这是如何完成的。它并没有尽可能地简化，但我相信你已经明白了，所以我会把进一步的改进留给你。

Javascript:

function myFunction(ele) {
  hideAll();
  ele.nextElementSibling.style.display="block";
}

function hideAll() {
  var dropdowns = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].style.display="none";
  }
}

window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        hideAll();
    }
}

HTML:

<div class="navbar">
    <div class=dropdown>
      <button class="dropbtn btn1" value="About Us" onclick="window.location.href='https://uklivesound.000webhostapp.com/aboutus.html'">About Us</button>
    </div>

    <div class="dropdown">
      <button  class="dropbtn dropbtn1" onclick="myFunction(this)">Rehearsals</button>  
      <div class="dropdown-content" id="myDropdown1">
        <a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a>
        <a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn2" onclick="myFunction(this)">Recording</button>
      <div class="dropdown-content" id="myDropdown2">
        <a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a>
        <a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn3" onclick="myFunction(this)">For Hire</button>  
      <div class="dropdown-content" id="myDropdown3">
        <a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a>
        <a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a>
        <a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a>
        <a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn4" onclick="myFunction(this)">Other Services</button>  
      <div class="dropdown-content" id="myDropdown4">
        <a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a>
        <a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a>
      </div>
    </div>

    <div class=dropdown>
      <button class="dropbtn btn2" value="Contact Us" onclick="window.location.href='https://uklivesound.000webhostapp.com/contact.html'">Contact Us</button>
    </div>
</div>

CSS:

.navbar {
     float:left;
     font-family:Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black,sans-serif;
     height:auto;
     width:100%;
     display:inline-block;
     margin:0;
     padding:0;
     position:relative;
 }

 .navbar a {   font-size: 2em;     font-weight: 100;
     color: white;
     text-align: center; }

 .dropdown {
    position: relative;
    float:left;
    width:16%;
    }

 .dropdown-content {
     display: none;
     position: absolute;
     top: 50px;
     background-color: #f9f9f9;
     width:100%;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
     padding:0px;
     height:auto;
     }

 .dropdown-content a {
   text-decoration: none; text-align:center; height:auto;
   display: block; width:100%; padding:0px; background-color:#000000; border: 1px solid white;
   }

 .dropdown-content a:hover {
   color: black;
   padding: 12px 16px;
   text-decoration: none; text-align:center; height:auto;
   display: block; width:100%; background-color:#FFFFFF; border: 1px solid black;
   font-family:Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black,sans-serif;
   transition-duration:0.5s; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
   }

 .dropbtn {
   color: white;
   padding:0px;  margin:0px;
   font-size:2em;
   border: 1px solid white;
   cursor:pointer; width:100%; float:left;
   }

 .dropbtn:hover, .dropbtn:focus {
   background-color:#FFFFFF;
   color: black;
   border: 1px solid black;
   font-family:Impact;
   transition-duration:0.5s;
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
 }

 .btn1 {
    background-color:#71aace;
  }

 .btn2 {
    background-color:#D84E92;
  }

 .dropbtn1 {
     background-color:#6c73b1;
   }

 .dropbtn2 {
     background-color:#d3c530;
   }

 .dropbtn3 {
     background-color:#82c845;
   }

 .dropbtn4 {
     background-color:#8f65a1;
   }

Answer 4

您的 post 中有很多不必要的代码和代码重复。大部分都可以删除。您也没有正确设置 HTML 结构、class 名称和 ID 以避免过多的代码或提供良好的语义。

菜单实际上只是一个美化的选项列表。因此，用于创建一个的最佳语义元素是 <ul> 元素，其中包含 <li> 元素。通过一些 CSS 样式，您可以删除项目符号并将垂直布局更改为水平布局。这通常是制作菜单的方式。

接下来，说到 classes 和 id。为需要处理的元素提供唯一的 id 属性，并将 classes 分配给需要作为组的一部分设置样式的元素。这使样式变得非常简单，并且消除了冗余的需要。

当谈到 JavaScript 时，不要使用内联 HTML 事件属性（onclick、onmouseover 等）。 Here is another post of mine 这解释了不使用那种设置事件处理程序的古老方法的许多原因。

所以，这是您的菜单的修改版本。您会发现代码少了多少，理解起来也简单多了。

// Get references to all elements you'll be working with:

// All the drop downs
var dd = document.querySelectorAll(".db");

// Set up each of the drop downs to invoke the toggleElement function when clicked
// and to hide the menu when the mouse moves off an open menu
for(var i = 0; i < dd.length; i++){
  dd[i].addEventListener("click", function(evt){ toggleElement(evt.target); });
  dd[i].addEventListener("mouseout", function(evt){ hideElement(evt.target); });  
}

// This one function does the job of the myFunction1 - myFunction4 functions
function toggleElement(element) {
  element.querySelector("ul").classList.toggle("hide");
}

function hideElement(element) {
  // If the element is not one of the two link buttons, hide its menu
  var el = element.querySelector("ul");
  
  if(el){
    el.classList.add("hide");
  }
}

/* Master styles for menu. The font will inherit down to children. 
   When specifying font names, use quotes around font names that contain spaces. 
   You had " sans-serif", which would never work because you included a leading
   space in the string. Plus sans-serif doesn't have a space in it, so it doesn't 
   need quotes anyway. */
.navbar {
      font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, "sans-serif";
      margin: 0;
      padding: 0;
      list-style:none;
}
 

/* These are the actual menu items*/
li { 
     text-align:center;
     color: white;
     margin:0;
     padding:0;
}
    
a { text-decoration: none; }
    
/* This simple class is applied to the drop down content from the start
   and then simply removed or added via JavaScript to show/hide them. */    
.hide { display: none; }
    
/* All drop buttons have many property values in common. Specify those once. */
.db { cursor: pointer; display:inline-block; width:calc(16.667% - 4px); }

/* Then just worry about what's different between them */
#dropbtn1, #dropbtn6 { background-color: #71aace; }
#dropbtn2 { background-color: #6c73b1; }
#dropbtn3 { background-color: #d3c530; }
#dropbtn4 { background-color: #82c845; }
#dropbtn5 { background-color: #8f65a1; }     

.dropdown-content {
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  list-style:none;
  position:absolute; /* This keeps the drop down from throwing off the layout when shown */
  padding:0;
  width:calc(16.667% - 4px); /* You have to account for the width of the borders. */
}
    
.dropdown-content li { text-align:left; }

.dropdown-content:hover {
  color: black;
  background-color: #FFFFFF;
  border: 1px solid black;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index:-1;
  display:block;
}

/* All drop button and regular button hover and focus styles are the same, just specify once */
.db:hover, .db:focus, .btn:hover, .btn:focus {
  background-color: #FFFFFF;
  color: black;
  cursor: pointer;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

<ul class="navbar">
  <li id="dropbtn1" class="db"><a href="https://uklivesound.000webhostapp.com/aboutus.html">About Us</a></li>

  <!-- Use id for unique identifiers, Use classes for common traits
       This button is specifically dropbtn1, but it is styled like 
       all other drop buttons. -->
  <li id="dropbtn1" class="db">Rehearsals
    <ul class="dropdown-content hide" id="myDropdown1">
      <li><a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a></li>
      <li><a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a></li>
    </ul>
  </li>

 <li id="dropbtn2" class="db">Recording
   <ul class="dropdown-content hide" id="myDropdown2">
     <li><a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a></li>
   </ul>
 </li>

 <li id="dropbtn3" class="db">For Hire
   <ul class="dropdown-content hide" id="myDropdown3">
     <li><a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a></li>
   </ul>
 </li>

 <li id="dropbtn4" class="db">Other Services
    <ul class="dropdown-content hide" id="myDropdown4">
      <li><a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a></li>
      <li><a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a></li>
    </ul>
 </li>
        
 <li id="dropbtn6" class="db"><a href="https://uklivesound.000webhostapp.com/contact.html">Contact Us</a></li>
   </ul>

CSS/Javascript 下拉菜单问题

CSS/Javascript Dropdown Menu Issue

html

javascript

css

navbar

dropdown