Have dropdown menu display over other dropdown on mobile

[unicorndev]

Hello there, I'd like to have my dropdown menu display over the other dropdowns and not below it!

 This is what happens when I click on Test Technique.

<div class="container">
  <div class="dropdown">
    <div class="caption">Sensor Types <i class="fa-solid fa-sort"></i></div>
    <div class="list">
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-0dc22785-c583-47d6-a789-597956bd6d23?hs_preview=xVldWvin-79629571592'">Differential Pressure</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-faf8fb14-97c7-460b-9b99-4217f9175578?hs_preview=ZCnAaNRX-79754160819'">Electrical Current</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-2d9322c5-3f9a-4097-9005-24118e5a720d?hs_preview=dmxZioyB-79753734578'">Electrical Volts</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-43254bd6-1275-46cb-ba72-a3970da2adf1?hs_preview=OtzvXEWc-79753734673'">Laminar Flow Sensor Type</div>
      <div class="item" onclick="location.href='#'">Load Cell</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-746b8b07-2f67-4ddf-a339-9f2cb4c30e25?hs_preview=YNkmoLOd-79753734699'">LVDT</div>
      <div class="item" onclick="location.href='#'">Pressure</div>
      <div class="item" onclick="location.href='#'">Temperature</div>
    </div>
  </div>
  
    <div class="dropdown">
    <div class="caption">Test Techniques <i class="fa-solid fa-sort"></i></div>
    <div class="list">
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-0dc22785-c583-47d6-a789-597956bd6d23?hs_preview=xVldWvin-79629571592'">Auto Zero</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-faf8fb14-97c7-460b-9b99-4217f9175578?hs_preview=ZCnAaNRX-79754160819'">Burst Under Pressure</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-2d9322c5-3f9a-4097-9005-24118e5a720d?hs_preview=dmxZioyB-79753734578'">Burst Under Vacuum</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-43254bd6-1275-46cb-ba72-a3970da2adf1?hs_preview=OtzvXEWc-79753734673'">Coarse Flow</div>
      <div class="item" onclick="location.href='#'">EV Battery</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-746b8b07-2f67-4ddf-a339-9f2cb4c30e25?hs_preview=YNkmoLOd-79753734699'">Crack Downstream</div>
    </div>
  </div>
  
    <div class="dropdown">
    <div class="caption">Industry <i class="fa-solid fa-sort"></i></div>
    <div class="list">
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-0dc22785-c583-47d6-a789-597956bd6d23?hs_preview=xVldWvin-79629571592'">Automotive</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-faf8fb14-97c7-460b-9b99-4217f9175578?hs_preview=ZCnAaNRX-79754160819'">Industrial</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-2d9322c5-3f9a-4097-9005-24118e5a720d?hs_preview=dmxZioyB-79753734578'">Medical</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-43254bd6-1275-46cb-ba72-a3970da2adf1?hs_preview=OtzvXEWc-79753734673'">Packaging</div>
      <div class="item" onclick="location.href='#'">EV Battery</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-746b8b07-2f67-4ddf-a339-9f2cb4c30e25?hs_preview=YNkmoLOd-79753734699'">Custom Solutions</div>
    </div>
  </div>
  
</div>

Don't want to show you other CSS code thats just styling fluff so here is just the mobile media query:

@media only screen and (min-width: 200px) and (max-width: 900px) {
  div.container {
    justify-content: center;
    display: block;
    margin-top: 30px;
}
}

JS:

$(function() {
  
  $('.dropdown > .caption').on('click', function() {
    $(this).parent().toggleClass('open');
  });
  
  $('.dropdown > .list > .item').on('click', function() {
    $('.dropdown > .list > .item').removeClass('selected');
    $(this).addClass('selected').parent().parent().removeClass('open').children('.caption').text( $(this).text() );
  });
  
  $(document).on('keyup', function(evt) {
    if ( (evt.keyCode || evt.which) === 27 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
  $(document).on('click', function(evt) {
    if ( $(evt.target).closest(".dropdown > .caption").length === 0 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
});

And on another note, I also can't seem to close the dropdown menu when I click on another 😞

Any suggestions would be appreciated, thanks so much!

[Jaycee_Lewis]

Hi, @unicorndev 👋 Thanks for including your details. Hey, @alyssamwilie @SJaeger, do you have any thoughts on how @unicorndev can approach this type of menu styling? Thank you! — Jaycee