How can i get this menu above the button?

Question

The menu at the moment appears below the button and within my footer and not above nor on top of the other content. I'd really apreciate any help. I have googled and searched on here and found nothing that I could understand to help.

This is my button and menu, if anyone can help me with what im doing wrong I'd be greatful, thank you for your time.

document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('menu-toggle');
    const menu = document.querySelector('.ja-menu');

    // Initially hide the menu
    menu.style.display = 'none';

    toggleButton.addEventListener('click', function() {
        // Toggle menu visibility
        if (menu.style.display === 'none') {
            menu.style.display = 'block';
        } else {
            menu.style.display = 'none';
        }
    });
});

.ja-menu {
    width: 154.5px;
    height: 238px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0; /* Remove padding here and let .j-menu-item handle it */
    border-radius: 10px;
    box-sizing: border-box;
}

    .ja-menu-item {
    display: block;
    padding: 10px;
    justify-content: center;
    text-decoration: none;
    transition: background 0.3s;
    ont-size: 14px;
    font-family: arial, sans-serif;
    color: #202124;
    box-sizing: border-box;
    
}
    .ja-menu-item-text {
    text-align: left; /* Align the text to the left */
}


.ja-menu-item:hover {
    background: #DADCE0;
}

.ja-divider {
    height: 1px;
    background-color: #DADCE0;
    margin: 0; /* This ensures the divider does not extend into the padding area */
}

.ja-toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px; /* Maintain consistent padding with .j-menu-item */
}

.ja-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.ja-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ja-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.ja-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.ja-switch input:checked + .j-slider {
    background-color: #2196F3;
}

.ja-switch input:focus + .j-slider {
    box-shadow: 0 0 1px #2196F3;
}

.ja-switch input:checked + .j-slider:before {
    transform: translateX(26px);
}

<div id="menu-container" style="position: relative; display: inline-block;">
                        <a id="menu-toggle" class="pHiOh" href="javascript:void(0);">Settings</a><div class="j-menu">

    <div class="ja-menu">
    <a class="ja-menu-item" href="#">Search settings</a>
    <a class="ja-menu-item" href="#">Advanced search</a>
    <a class="ja-menu-item" href="#">Your data in Search</a>
    <a class="ja-menu-item" href="#">Search history</a>
    <a class="ja-menu-item" href="#">Search help</a>
    <a class="ja-menu-item" href="#">Send feedback</a>
     <div class="ja-divider"></div>
    <div class="ja-menu-item ja-toggle-container">
        <span>Dark theme:</span>
        <label class="ja-switch">
            <input type="checkbox" id="j-dark-theme-toggle">
            <span class="ja-slider round"></span>
        </label>
    </div>
</div>

Answer 1

Add the following inline style to ja-menu. Like-

<div class="ja-menu" style="position: absolute; bottom: 100%;">

document.addEventListener('DOMContentLoaded', function() {
  const toggleButton = document.getElementById('menu-toggle');
  const menu = document.querySelector('.ja-menu');

  // Initially hide the menu
  menu.style.display = 'none';

  toggleButton.addEventListener('click', function() {
    // Toggle menu visibility
    if (menu.style.display === 'none') {
      menu.style.display = 'block';
    } else {
      menu.style.display = 'none';
    }
  });
});

<style>.ja-menu {
  width: 154.5px;
  height: 238px background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  border-radius: 10px;
  box-sizing: border-box;
}

.ja-menu-item {
  display: block;
  padding: 10px;
  justify-content: center;
  text-decoration: none;
  transition: background 0.3s;
  ont-size: 14px;
  font-family: arial, sans-serif;
  color: #202124;
  box-sizing: border-box;
}

.ja-menu-item-text {
  text-align: left;
  /* Align the text to the left */
}

.ja-menu-item:hover {
  background: #DADCE0;
}

.ja-divider {
  height: 1px;
  background-color: #DADCE0;
  margin: 0;
  /* This ensures the divider does not extend into the padding area */
}

.ja-toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  /* Maintain consistent padding with .j-menu-item */
}

.ja-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.ja-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ja-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.ja-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.ja-switch input:checked+.j-slider {
  background-color: #2196F3;
}

.ja-switch input:focus+.j-slider {
  box-shadow: 0 0 1px #2196F3;
}

.ja-switch input:checked+.j-slider:before {
  transform: translateX(26px);
}
#menu-toggle{
border: 1px solid;
padding: 8px;
color: white;
background-color: darkcyan;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
}

<div style="margin-top: 500px"></div>
<div id="menu-container" style="position: relative; display: inline-block;">
  <a id="menu-toggle" class="pHiOh" href="javascript:void(0);">Settings</a>
  <div class="j-menu">

    <div class="ja-menu" style="position: absolute; bottom: 100%;">
      <a class="ja-menu-item" href="#">Search settings</a>
      <a class="ja-menu-item" href="#">Advanced search</a>
      <a class="ja-menu-item" href="#">Your data in Search</a>
      <a class="ja-menu-item" href="#">Search history</a>
      <a class="ja-menu-item" href="#">Search help</a>
      <a class="ja-menu-item" href="#">Send feedback</a>
      <div class="ja-divider"></div>
      <div class="ja-menu-item ja-toggle-container">
        <span>Dark theme:</span>
        <label class="ja-switch">
            <input type="checkbox" id="j-dark-theme-toggle">
            <span class="ja-slider round"></span>
        </label>
      </div>
    </div>