大家好，我对网页设计相当陌生，我目前正在设计一个网站，我正在尝试在其中使用使用CSS和Javascript制作的下拉菜单。我几乎设法让一切正常工作，但是唯一需要解决的问题是下拉菜单内容显示在容器的左侧，而不是相关的父菜单选项下方。
截图
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>你的帖子中有很多不必要的代码和代码重复。其中大部分可以删除。您也没有正确设置HTML结构，类名和id以避免过多的代码或提供良好的语义。
菜单实际上只是一个美化的选择列表。因此，用于创建一个的最佳语义元素是包含<li>元素的<ul>元素。使用一点 CSS 样式，您可以删除项目符号并从垂直布局更改为水平布局。这通常是菜单的制作方式。
接下来，当涉及到类和 id 时。为需要处理的唯一id属性的元素指定，并将类分配给需要作为组的一部分设置样式的元素。这使得样式设置变得更加简单，并且消除了冗余的需要。
当涉及到JavaScript时，不要使用内联HTML事件属性(onclick，onmouseover等)。这是我的另一篇文章，它解释了不使用这种古老的设置事件处理程序方式的许多原因。
因此，这是菜单的修改版本。您将看到代码少了多少，理解起来又简单了多少。
// 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 中的下拉列表的示例：
.dropdown-container {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
margin-left: -100px;
}
相关JSFiddle
CSS类dropdown的宽度设置为 100%，这意味着此父级中包含的所有.dropdown-content1元素都将具有完全相同的宽度，从完全相同的点开始。这就解释了为什么你会看到下拉菜单向左。
将.dropdown类更改为以下内容：
.dropdown {
float: left;
}
你会注意到的第一件事是你所有的按钮都会有点有趣。
这是因为内部 CSS 类dropbtn1和dropbtn2等将其width设置为16.667%。将这些宽度设置为100%，您将开始看到下拉行为更"如预期"。
您需要将 16% 宽度的元素更改为 .dropdown 父类。然后将每个下拉内容类设置为父类的 100%。您还需要将父下拉类设置为位置：相对，将子内容类设置为位置：绝对，然后告诉浏览器将下拉列表放在父级内部的位置(从父级向下放置 50px 等)。
这是一个对我有用的重写...
编辑：您在"关于"和"联系我们"href链接符号中有一个错误，省略了引号。我还进一步简化了你的Javascript和CSS，结合了许多元素和类，这样你就可以看到这是如何完成的。它并不像它可能的那样简化，但我相信你明白了，所以我会把进一步的改进留给你。
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;
}