如何将下拉列表移动到左侧？

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>