Want My Hamburger Menu to Have Opaque White Background and Cover Banner - menu

Question

My website has a hamburger menu made with only HTML and CSS. When the hamburger icon is clicked and the menu activated, the menu titles are displayed over the background image instead of having a white background. (The hamburger menu has a transparent background.) How do I make it so that the menu displays OVER whatever is in the background, with its own white background?`
<div class="nav">
<h1>MA</h1>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
my work
about
contact
</div>
</div>
.nav {
text-align: right;
height: 50px;
line-height: 70px;
margin-bottom: 20px;
margin-top: 15px;
font-family: Gothic A1;
font-size: 20px;
color: black;
}
.menu {
margin: 0 30px 0 0;
background-color: white;
}
.menu a {
clear: right;
text-decoration: none;
color: black;
margin: 0 10px;
line-height: 70px;
padding-left: 30px;
}
.menu a:hover {
color: #edbecb;
text-decoration: none;
}
label {
margin: 0 30px 0 0;
font-size: 50px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
padding-right: 30px;
}
.menu {
text-align: right;
width: 100%;
/* height: 1000px;*/
display: none;
background-color: white;
line-height: 50px;
margin-top: 0px;
padding-right: 30px;
}
.menu a {
display: block;
margin: 0;
background-color: white;
}
#toggle:checked + .menu {
display: block;
background-color: white;
position: absolute;
}
#toggle:checked + .menu a {
background-color: white;
position: absolute;
}
#toggle:checked + label {
background-color: white;
}
}