如何将下拉列表移到左侧

Question

我正在制作一个下拉菜单，其中所有内容都运行良好。但我想要的是将下拉列表移到左侧。我只想把下拉列表移到左边，但不想把下拉按钮(策略(移到左边。我试了几件事，但都没用。请指导我怎么做？

h3{
margin: 0;
padding-block: 1rem;
}

#dropdown {
position: relative;
width: 18%;
left:5%;
display: inline-block;
overflow-y: hidden;
z-index: 9999999999999999999999999999999999999999999999;
padding-bottom: 50%;
}

.dropdown-content {
visibility: hidden;
position: absolute;
background-color: #f9f9f9;
width: 100%;
z-index: 1;
right: 0%;
overflow-y: hidden;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
width: 850%;
overflow-y: hidden;
height: 100%;
}

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

.dropdown-content a:hover {
background-color: #f1f1f1;
overflow-y: hidden;
}

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

<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>
<br><br><br><br><br><br><br><br><br>
</div>

Answer 1

我想你想显示下拉列表左边的下拉按钮

h3{
margin: 0;
padding-block: 1rem;
}

#dropdown {
position: relative;
width: 100%;
left:5%;
display: inline-block;
overflow-y: hidden;
z-index: 999;
padding-bottom: 50%;
}

.dropdown-content {
visibility: hidden;
position: absolute;
background-color: #f9f9f9;
width: 50%;
z-index: 1;
left: 110px;
top: 20px;
overflow-y: hidden;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
width: auto;
overflow-y: hidden;
height: 100%;
}

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

.dropdown-content a:hover {
background-color: #f1f1f1;
overflow-y: hidden;
}

.dropbtn:hover+.dropdown-content {
visibility: visible;
overflow-y: hidden;
}
.dropbtn {
width:150px;
cursor: pointer;
}

<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>
<br><br><br><br><br><br><br><br><br>
</div>