How can I move the dropdown list to the left side?

Question

I am making a dropdown menu where everthing is working fine. But what I want is to move the dropdown list to the left side. I want to only move the dropdown list to the left side but not the dropdown button (Strategy). I tried a few things but it did not work. Pls guide me how can I do it?

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

I think you want to display dropdown list left to dropdown button

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>