汉堡式折叠html,HTML – 如何获得响应式汉堡菜单不要压低内容

我有这种响应式汉堡包导航,目前正在推动它下面的内容.有没有办法让它只是悬停在内容上而不是？我尝试了很多东西,没有任何我正在做的事,但我不是专家.任何帮助深表感谢！谢谢！

• Our Work
• About
• Careers
• Contact

figure#main-img {

width: 100%;

position: relative;

overflow: hidden;

border-top: 1px solid #000000;

border-bottom: 1px solid #000000;

z-index: 10;

height: 200px;

background-color: red;

}

nav.header {

background-color: silver;

width: 100%;

float: left;

overflow: hidden;

}

.table {

display: table;

margin: 0 auto;

}

.header ul {

list-style: none;

position: relative;

float: left;

display: block;

left: 50%;

max-width: 1200px;

margin: 0;

padding: 0;

}

.header ul li {

position: relative;

right: 50%;

/*float: left;

display: inline-block;*/

}

.header li a {

display: block;

padding: 1em;

text-decoration: none;

color: #000000;

}

.header li a:hover {

background-color: #B5B5B5;

}

.header .menu {

clear: both;

max-height: 0;

transition: max-height .2s ease-out;

}

.header .menu-icon {

cursor: pointer;

display: inline-block;

float: right;

padding: 28px 20px;

position: relative;

user-select: none;

}

.header .menu-icon .navicon {

background: #333;

display: block;

height: 2px;

position: relative;

transition: background .2s ease-out;

width: 18px;

}

.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {

background: #333;

content: '';

display: block;

height: 100%;

position: absolute;

transition: all .2s ease-out;

width: 100%;

}

.header .menu-icon .navicon:before {

top: 5px;

}

.header .menu-icon .navicon:after {

top: -5px;

}

.header .menu-btn {

display: none;

}

.header .menu-btn:checked ~ .menu {

max-height: 240px;

}

.header .menu-btn:checked ~ .menu-icon .navicon {

background: transparent;

}

.header .menu-btn:checked ~ .menu-icon .navicon:before {

transform: rotate(-45deg);

}

.header .menu-btn:checked ~ .menu-icon .navicon:after {

transform: rotate(45deg);

}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {

top: 0;

}

@media only screen and (min-width: 750px) {

.header li {

float: left;

}

.header li a {

padding: 20px 30px;

}

.header .menu {

clear: none;

/*float: right;*/

max-height: none;

}

.header .menu-icon {

display: none;

}

}

@media only screen and (max-width: 750px) {

.header li a {

background-color: Silver;

opacity: 0.9;

}

.header ul li {

border-bottom: 1px solid #000000;

color: #000;

}

.header ul li:first-child {

border-top: 0px solid #000000;

}

.header ul {

width: 100%;

}

}

@media only screen and (max-width: 480px) {

nav.header {

}

}