汉堡菜单应显示在背景内容之上

Question

我在HTML，CSS，Jquery的帮助下在右上角创建了汉堡包菜单。当我点击汉堡菜单图标时，它会向下滑动，现有背景会向下滑动。我想在点击汉堡图标后，菜单应显示在背景上方，而不是滑下现有内容。

$(".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>

Answer 1

将position: absolute添加到菜单类。

您还需要为其添加背景，以便更清楚地看到它。

Answer 2

要防止现有内容向下滑动，只需转到CSS并将菜单设置为position: fixed;和z-index: 5;。

这应该可以解决问题。