ハンバーガーメニューが背景の上に表示される

HTML、CSS、Jqueryの助けを借りて、右上隅にハンバーガーメニューを作成しました。私がハンバーガーメニューicon.Itをクリックすると、下にスライドして、既存の背景が下に滑っています。ハンバーガーアイコンをクリックした後、メニューは既存のコンテンツをスライドさせるのではなく、背景の上に表示する必要があります。ハンバーガーメニューが背景の上に表示される

$(".cross").hide(); 
 
$(".menu").hide(); 
 
$(".hamburger").click(function() { 
 
    $(".menu").slideToggle("slow", function() { 
 
    $(".hamburger").hide(); 
 
    $(".cross").show(); 
 
    }); 
 
}); 
 

 
$(".cross").click(function() { 
 
    $(".menu").slideToggle("slow", function() { 
 
    $(".cross").hide(); 
 
    $(".hamburger").show(); 
 
    }); 
 
});

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
 
    display: block; 
 
} 
 
body { 
 
    line-height: 1; 
 
} 
 
ol,ul { 
 
    list-style: none; 
 
} 
 
blockquote,q { 
 
    quotes: none; 
 
} 
 
blockquote:before,blockquote:after,q:before,q:after { 
 
    content: ''; 
 
    content: none; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 
.header { 
 
    background-color: #c1d72f; 
 
    padding: 40px 5px 40px 5px; 
 
} 
 
.header img {} .header h2 { 
 
    color: #fff; 
 
    padding: 0 5px; 
 
    font-size: 16px; 
 
    font-weight: 700; 
 
} 
 
.social-icon { 
 
    float: right; 
 
} 
 
.main-body { 
 
    padding: 15px; 
 
} 
 
.main-body h2 { 
 
    font-size: 40px; 
 
    color: #3F4906; 
 
    padding: 10px 10px 20px 0; 
 
} 
 
.main-body p { 
 
    font-weight: bold; 
 
    line-height: 20px; 
 
    font-size: 17px; 
 
    padding: 10px 0; 
 
} 
 
.main-body-info { 
 
    width: 100%; 
 
} 
 
.main-body-image { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.main-body span { 
 
    font-weight: bold; 
 
    line-height: 20px; 
 
    font-size: 17px; 
 
    padding: 10px 0; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 50px; 
 
    line-height: 50px; 
 
} 
 
.hamburger { 
 
    background: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    line-height: 45px; 
 
    padding: 0px 15px 0px 15px; 
 
    color: #fff; 
 
    border: 0; 
 
    font-size: 1.4em; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    outline: none; 
 
    z-index: 10000000000000; 
 
} 
 
.cross { 
 
    background: none; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0; 
 
    padding: 0px 15px 0px 15px; 
 
    color: #fff; 
 
    border: 0; 
 
    font-size: 3em; 
 
    line-height: 65px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    outline: none; 
 
    z-index: 10000000000000; 
 
} 
 
.menu { 
 
    z-index: 1000000; 
 
    font-weight: bold; 
 
    font-size: 0.8em; 
 
    width: 100%; 
 
    ; 
 
    position: #fff; 
 
    text-align: center; 
 
} 
 
.menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    list-style-image: none; 
 
} 
 
.menu li { 
 
    display: block; 
 
    padding: 15px 0 15px 0; 
 
    border-bottom: #1d1f20 1px solid; 
 
} 
 
.menu li:hover { 
 
    display: block; 
 
    background: #181818; 
 
    padding: 15px 0 15px 0; 
 
    border-bottom: #1d1f20 1px solid; 
 
} 
 
.menu ul li a { 
 
    text-decoration: none; 
 
    margin: 0px; 
 
    color: #000; 
 
} 
 
.menu ul li a:hover { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
.menu a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.menu a:hover { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.glyphicon-home { 
 
    color: white; 
 
    font-size: 1.5em; 
 
    margin-top: 5px; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="header"> 
 
    <button class="hamburger">&#9776;</button> 
 
    <button class="cross">&#735;</button> 
 
    <div class="menu"> 
 
    <ul> 
 
     <a href="#"> 
 
     <li>BOKNINGSFÖRFRÅGAN</li> 
 
     </a> 
 
     <a href="#"> 
 
     <li>KONFERENSADMINISTRATION</li> 
 
     </a> 
 
     <a href="#"> 
 
     <li>KONTAKTUPPGIFTER</li> 
 
     </a> 
 
     <a href="#"> 
 
     <li>NYHETER</li> 
 
     </a> 
 
    </ul> 
 
    </div> 
 
    <a href="index.html"> 
 
    <img src='http://studio.gomogroup.com.s3-eu-west-1.amazonaws.com/original/8162/Konferenspoolen_logo.png?1473414803' width="100%" /> 
 
    </a> 
 
    <h2>Specialister på möten och konferenser i Sverige</h2> 
 
    <div class="social-icon"> 
 
    <a href="https://www.linkedin.com/company/konferenspoolen"> 
 
     <img src='social-icon/linkedin.png' width="35px" height="35px" /> 
 
    </a> 
 
    <a href="index.html"> 
 
     <img src='social-icon/gmail.jpg' width="35px" height="35px" /> 
 
    </a> 
 
    <a href="https://www.facebook.com/konferenspoolen/?fref=ts"> 
 
     <img src='social-icon/fb.png' width="35px" height="35px" /> 
 
    </a> 
 
    </div> 
 
</div> 
 
</div>

出典

2016-09-12 Rashmi Sonke