Das HTML-Schaltflächen-Tag versteckt sich hinter einem anderen Schaltflächen-Tag ⇐ CSS

[Anonymous]

Ich erstelle eine einfache Menüfunktion mit einigen Animationen, die gut funktioniert, sich aber hinter einem anderen Schaltflächenelement versteckt. Die Codeblöcke sind unten angegeben.
Hinweis: Diese gesamte Website wurde auf einem Android-Telefon erstellt und nicht auf einem Desktop oder Laptop getestet.
Html ——— CODE

Code: Select all

    






Checking


MENU



HELLO A paragraph is a self-contained unit of discourse in writing dealing with a particular point or idea. A paragraph consists of three or more sentences. Though not required by the syntax of any language, paragraphs

[url=#para]ABOUT-US[/url]
CONTACT-US

JavaScript ——— CODE

Code: Select all

// OPENING MENU

function MENUOPEN(){
var btn=document.getElementById('MENU');
var openbtn=document.getElementById('MENUOPENED');
openbtn.style="box-shadow:5px 3px 5px; animation:right ease 2s;"
btn.innerHTML="CLOSE";
btn.style="width:27%;";
btn.setAttribute("onclick","MENUCLOSE();")
}
//CLOSING MENU
function MENUCLOSE(){
var btn=document.getElementById('MENU');
var openbtn=document.getElementById('MENUOPENED');
openbtn.style="animation:left ease 2s;box-shadow:5px 3px 5px;left:400px;opacity:.0;"
btn.innerHTML="MENU";
btn.style="width:27%;";
btn.setAttribute("onclick","MENUOPEN();")
}

Css ——— CODE

Code: Select all

body{
font-family: 'DynaPuff', cursive;
}
.BTN{
box-shadow:5px 3px 5px;
border-radius:20px;
font-size:26px;
font-family: 'DynaPuff', cursive;
background-color:white;
}
#MENU{
position:fixed;
box-shadow:5px 3px 5px;
border-radius:20px;
width:25%;
font-size:26px;
font-family: 'DynaPuff', cursive;

}
#CNAME{
box-shadow:5px 3px 5px;
font-family: 'DynaPuff', cursive;
padding-left:2px;
border-radius:20px;
position:fixed;
width:63%;
left:32%;
top:1.5%;
font-size:26px;
}
#para{
position:absolute;
top:10%;
left:2.5%;
width:95%;

}

@keyframes left {
0% {
opacity: 1;

}
100% {

transform: translatex(-100%);
opacity: 0;

}
}
@keyframes right {
0% {
opacity: 0;

transform: translateX(90%);
}
100% {
opacity: 1;

}
}

Kann jemand dieses Problem lösen?