放入下拉内容时，属性宽度不起作用

Question

我正在制作一个下拉菜单，但有一个问题是，当我在dropdown-content中添加width:15%时，它不起作用，但如果我在#dropdown中添加，它就起作用。所以请告诉我，如果我想把宽度放在下拉内容中，为什么它不起作用？

h3{
margin: 0;
padding-block: 1rem;
}
.dropbtn{
position: relative;
left: 17%;
}
#dropdown {
position: relative;
width: 15%;
display: inline-block;
overflow-y: hidden;
z-index: 999;
padding-bottom: 50%;
}

.dropdown-content {
visibility: hidden;
position: fixed;
background-color: #f2f3a2;
z-index: 1;
overflow-y: hidden;
left: 0%;
border-radius: 5%;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
overflow-y: hidden;
position: relative;
}

.dropdown-content:hover {
visibility: visible;
overflow-y: hidden;
}

.dropdown-content a:hover {
background-color: rgb(90, 216, 90);
}

.dropbtn:hover+.dropdown-content {
visibility: visible;
}

<div id="dropdown" class="animate__animated animate__rollIn">
<h3 class="dropbtn">STRATEGY</h3>

<div class="dropdown-content">
<a href="Short Straddle with Divisor Based SL.html">Short Straddle with Divisor Based SL</a>
<a href="short straddle sl.html">Short Straddle with Trailing SL</a>
<a href="straddlesimple.html">09:20 Straddle (Simple)</a>
<a href="straddle shift sl.html">09:20 Straddle (Shift SL to Cost)</a>
<a href="straddle roll the pending.html">09:20 Straddle (Roll the Pending Leg)</a>
<a href="index combo.html">Index Combo</a>
<a href="index option buying.html">Index Option Buying</a>
</div>
</div>

<h3 style="position: relative;right: 5%; color: white;" class="animate__animated animate__rollIn"><a style="text-decoration: none; color: white;" href="https://eaccount.indiainfoline.com?ReferralEmpId=WIl3W6p+0CSxgb43zO5CDA==&IsZ20Scheme=PWFawC7VFMmiW4Oysu+Kwg==" target="blanc"> OPEN DEMAT ACCOUNT</a></h3>
<h3 style="position: relative;right: 7%;" class="animate__animated animate__rollIn">AMIBROKER AFL</h3>
<h3 class="animate__animated animate__rollIn" style="position: relative;right: 8.5%;"><a style="text-decoration: none; color: white;" href="contactus.html">CONTACT US</a></h3>
</div>

Answer 1

它不起作用，因为下拉内容有一个固定的位置，这就是为什么你需要告诉浏览器父元素的宽度。子项的宽度采用父项的固定百分比值。这意味着，如果您为子元素设置15%，那么您需要为父元素设置一些常量值，如width:300px，以便通知浏览器子元素的值与哪个元素相关。