Tengo un fragmento de HTML/CSS aquí: https://codepen.io/trudeau_sucks123/pen/PoOyrzK para un menú desplegable que se expande hacia arriba. Me gustaría iniciar una función JS al hacer clic en una de las opciones, pero hacerlo a través de un botón parece crear un resultado realmente extraño/feo. ¿Cómo puedo hacer que esto aparezca normalmente? (Tenga en cuenta que excluí la parte JS porque esa parte está bien, el problema es realmente cómo parece todo)

Además, las opciones que aparecen al pasar el mouse no están alineadas por algún motivo y parece que no puedo solucionarlo.

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; }