我有一个问题，我希望下拉菜单的宽度与激活它的按钮相同。
我试过了。
width: 100% (没有用)html {
--main-text-color: white;
--main-background-color: black;
--main-navbar-color: rgb(51, 51, 51);
--main-link-color: rgb(200, 200, 255);
overflow-x: hidden;
background-color:var(--main-background-color);
}
/*Navbar section*/
@font-face {
font-family: arrow;
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0');
}
/*Below from w3schools*/
/* Navbar container */
.navbar {
overflow: hidden;
background-color: rgb(51, 51, 51);
font-family: "arrow", "Impact", "Impactincase", serif;
}
.navbar a {
float: left;
font-size: 50px;
color: var(--main-text-color);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
color: rgb(225, 225, 255);
text-decoration: none;
}
.navbar .dropdown .dropdown-content a:hover {
color: black;
}
/* Links inside the navbar */
.navbar .notlogo {
float: right;
font-size: 16px;
color: var(--main-text-color);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: right;
overflow-x: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 50px;
border: none;
outline: none;
color: var(--main-text-color);
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a blue background color to navbar links on hover */
.navbar .notlogo:hover, .dropdown:hover .dropbtn {
background-color: rgb(51, 51, 100);
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: inherit;
z-index: 1;
white-space: nowrap;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
display: block;
font-size: 16px;
padding: 12px 16px;
text-decoration: none;
text-align: left;
width: 100%;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/*End of copying from w3schools*/
#normallogo {
display: inline-block;
}
#smalllogo {
display: none;
}
@media screen and (max-width: 840px) {
#normallogo {
display: none;
}
#smalllogo {
display: inline-block;
}
}<body style="margin:0;padding:0;">
<div class="navbar" id="loadcorrectly">
<a class="ImpactD" href="index" id="normallogo">JDM Cars Galore</a>
<a class="ImpactD" href="index" id="smalllogo">JDMCG</a>
<div class="dropdown">
<button class="dropbtn">
Enquiries 
</button>
<div class="dropdown-content">
<a href="request">Request a car</a>
<a href="about">About</a>
<a href="contact">Contact us</a>
<a href="copyright">Copyright</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">
Cars 
</button>
<div class="dropdown-content">
<a href="86">Sprinter</a>
<a href="RX7">RX-7</a>
<a href="GTR">GT-R</a>
<a href="Corona">Corona</a>
<a href="EG6">Civic</a>
</div>
</div>
</div>
</body>这段代码与以下代码基本相同 https:/www.w3schools.comhowtohowto_css_dropdown.asp 但是已经改了。
更新你的代码检查。
https:/jsfiddle.netadratarek7yw6nvka6。
变化。
.dropdown-content {
position: absolute;
width: 100%;
}
.navbar {
/*overflow: hidden; removed and adding static height */
height: 88px;
}
有几种方法可以实现这一点 取决于你的喜好。您面临的最大问题是，您认为下拉内容应该知道它的父元素的宽度。一个绝对定位的元素只有在特定的条件下才能知道它的父元素的宽度，而这些条件并没有得到满足。
选项#1. (最简单的)方法是为您的类(.dropdown-content)设置一个固定宽度，与激活它的按钮的固定宽度相匹配。
选项#2. 一个更（动态）的方法是给父类（.dropdown）设置一个position:relative。由于你的结构，你还需要做一些其他的改变才能得到你想要的结果，比如摆脱.navbar & .dropdown上的overflow:hidden。
选项#3.在.navbar & .dropdown上去掉overflow:hidden。(推荐的)方法是完全改变你的导航条结构& 它的内容。.navbar应该是position:absolute或position:fixed(取决于你想让导航栏如何表现。)然后每个.dropdown按钮可以是position:absolute或position:relative。然后，你的.dropdown-content可以设置为width:100%。这就是你要找的行为）。
你需要改变.dropdown-content的位置。.dropdown-content 类是相对的。
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: inherit;
z-index: 1;
white-space: nowrap;
}