Make dropdown options kickoff JS function-CodePudding

I have a HTML/CSS snippet here: https://codepen.io/trudeau_sucks123/pen/PoOyrzK for a dropdown that expands upwards. I would like to launch a JS function upon clicking one of the options but doing so through a button seems to create really weird /ugly result. How can I get this to appear normally? (note i've excluded the JS part cause that part is fine, it's really how it all appears that's the issue)

Also the options that appear on hover aren't aligned for some reason and I can't seem to fix it.

HTML:

<div>
  <ul class='menu--main_toggle'>
    <li>More
      <ul class='sub-menu'>
        <li><button onclick="toggleA()" id="btn_scroller"></button>Toggle A</li>
        <li><button onclick="toggleB()" id="btn_scroller"></button>Toggle B</li>
        <li><button onclick="toggleC()" id="btn_scroller"></button>Toggle C</li>
      </ul>
    </li>
  </ul>
</div>

CSS:

.menu--main_toggle {
  display: block;
  position: fixed;
  bottom: 10px; /* Place the button at the bottom of the page */
  left: 10px; /* Place the button 30px from the left */
  z-index: 99; /* Make sure it does not overlap */
  list-style-type: none;
}
.menu--main_toggle ul {
  list-style: none;
}
.menu--main_toggle li {
  list-style: none;
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 15px 20px;
  background-color: #1f3469;
  margin-right: -4px;
  /* border-radius: 10px; Rounded corners */
  color: white; /* Text color */
}
.menu--main_toggle li:hover {
  background-color: #2baae2;
}
.menu--main_toggle li:hover .sub-menu {
  max-height: 300px;
  visibility: visible;
  bottom: 100%;
  transition: all 0.4s linear;
}
.menu--main_toggle .sub-menu {
  display: block;
  visibility: hidden;
  position: absolute;
  left: 0;
  box-shadow: none;
  max-height: 0;
  width: 150px;
  overflow: hidden;
}
.menu--main_toggle .sub-menu li {
  display: block;
  list-style-type: none;
}

CodePudding user response：

Remove the <button>, they cause the 'ugly' style, move the onclick to the <li>
Instead off creating 3 toggleX functions, just use 1 and get the clicked element using event.target
The 'misalignment' is caused by a padding on the sub menu. Remove that by using padding: 0 on .sub-menu

function toggle() {
  console.log('Toggle', event.target);
}

.menu--main_toggle {
  display: block;
  position: fixed;
  bottom: 10px; /* Place the button at the bottom of the page */
  left: 10px; /* Place the button 30px from the left */
  z-index: 99; /* Make sure it does not overlap */
  list-style-type: none;
}
.menu--main_toggle ul {
  list-style: none;
}
.menu--main_toggle li {
  list-style: none;
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 15px 20px;
  background-color: #1f3469;
  margin-right: -4px;
  /* border-radius: 10px; Rounded corners */
  color: white; /* Text color */
}
.menu--main_toggle li:hover {
  background-color: #2baae2;
}
.menu--main_toggle li:hover .sub-menu {
  max-height: 300px;
  visibility: visible;
  bottom: 100%;
  transition: all 0.4s linear;
}
.menu--main_toggle .sub-menu {
  display: block;
  visibility: hidden;
  position: absolute;
  left: 0;
  box-shadow: none;
  max-height: 0;
  width: 150px;
  overflow: hidden;
}
.menu--main_toggle .sub-menu li {
  display: block;
  list-style-type: none;
}

.sub-menu {
  padding: 0;
}

<div>
  <ul class='menu--main_toggle'>
    <li>More
      <ul class='sub-menu'>
        <li onclick="toggle()" id="btn_scroller">Toggle A</li>
        <li onclick="toggle()" id="btn_scroller">Toggle B</li>
        <li onclick="toggle()" id="btn_scroller">Toggle C</li>
      </ul>
    </li>
  </ul>
</div>