覆盖菜单不起作用

Question

帮助!!我创建了一个覆盖汉堡菜单，当我单击它时，更多的导航项目会出现在水平行中(就像这个 http://www.spab-rice.com/themeselector/?theme=avoc-html(，但它无法正常工作，当我点击汉堡菜单时什么也没发生，看起来我错过了几行代码，但我不知道是哪一个，

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  display: table;
}
body {
  background-image: url("https://cdn.shopify.com/s/files/1/0862/7604/files/Sugar_Paper-Wedding_Agenda-Blog-2_1024x1024.jpg?v=1487113518")
}
body {
  background-size: cover;
}
.my-block {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
h1 {
  font-family: raleway;
  letter-spacing: 3px;
  color: Salmon;
}
h4 {
  font-family: raleway;
  font-weight: 100;
  letter-spacing: 1.5px;
  color: DarkGray;
  line-height: 200%
}
button {
  font-family: raleway;
  color: salmon;
  letter-spacing: 2px;
}
.button {
  background-color: darksalmon;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: 2px solid #E9967A;
  margin: 10px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}
.button:hover {
  background-color: transparent;
  color: black;
  border: 2px solid #FA8072;
}
.square {
  border: solid 21px #fffff;
  width: 30px;
  height: 30px;
}
span {
  font-family: raleway;
  font-weight: 300;
}
li {
  font-family: raleway;
}
text {
  font-family: montserrat;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0px;
  z-index: 10;
}
header.non-fixed {
  position: absolute;
}
header .header-inner {
  padding: 0px 40px;
  height: 0;
  margin-top: 60px;
  margin-bottom: 60px;
}
header .header-inner.wrapper {
  padding: 0;
}
#menu {
  position: relative;
  z-index: 10;
}
.open-nav {
  display: block;
  height: 30px;
  float: right;
  position: relative;
  z-index: 10;
  margin-left: 20px;
}
.open-nav .hamburger {
  display: inline-block;
  width: 22px;
  height: 2px;
  background-color: darksalmon;
  position: relative;
  top: -3px;
  transition: background 0.4s ease;
}
.open-nav .hamburger:before,
.open-nav .hamburger:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: darksalmon;
  right: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.4s, background 0.4s ease, right .2s ease;
  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease;
  -moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease;
  -o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease;
  -ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease;
}
.open-nav .hamburger:before {
  right: 2px;
  -webkit-transform: translateY(-6px) rotate(0deg);
  -moz-transform: translateY(-6px) rotate(0deg);
  -ms-transform: translateY(-6px) rotate(0deg);
  -o-transform: translateY(-6px) rotate(0deg);
  transform: translateY(-6px) rotate(0deg);
}
.open-nav .hamburger:after {
  right: 5px;
  -webkit-transform: translateY(6px) rotate(0deg);
  -moz-transform: translateY(6px) rotate(0deg);
  -ms-transform: translateY(6px) rotate(0deg);
  -o-transform: translateY(6px) rotate(0deg);
  transform: translateY(6px) rotate(0deg);
}
.open-nav:hover .hamburger:before,
.open-nav:hover .hamburger:after {
  right: 0px;
}
.open-nav .text {
  width: 65px;
  text-align: right;
  display: inline-block;
  font-family: 'raleway';
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  color: darksalmon;
  letter-spacing: 0.12em;
  transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s;
}
/* open nav state */
header.nav-is-open #menu .open-nav .hamburger {
  background-color: transparent;
  transition: background 0.1s ease;
}
header.nav-is-open #menu .open-nav .hamburger:before {
  width: 70%;
  right: 0px;
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
  background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .hamburger:after {
  width: 70%;
  right: 0px;
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
  background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .text {
  transition: width 0.4s ease, opacity 0.2s ease;
  width: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
nav#main-nav {
  float: left;
  visibility: hidden;
}
header.nav-is-open #menu nav#main-nav {
  visibility: visible;
}
nav#main-nav ul {
  list-style: none;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
nav#main-nav ul>li {
  margin: 0 0 0 20px;
  padding: 0;
  display: inline-block;
  position: relative;
  transition: top 0.3s ease 0.4s, opacity 0.3s ease;
  top: -5px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#menu {
  position: relative;
  z-index: 10;
}
.open-nav {
  display: block;
  height: 30px;
  float: right;
  position: relative;
  z-index: 10;
  margin-left: 20px;
}
.open-nav .hamburger {
  display: inline-block;
  width: 22px;
  height: 2px;
  background-color: #0d0d0d;
  position: relative;
  top: -3px;
  transition: background 0.4s ease;
}
.open-nav .hamburger:before,
.open-nav .hamburger:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #0d0d0d;
  right: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.4s, background 0.4s ease, right .2s ease;
  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease;
  -moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease;
  -o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease;
  -ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease;
}
.open-nav .hamburger:before {
  right: 2px;
  -webkit-transform: translateY(-6px) rotate(0deg);
  -moz-transform: translateY(-6px) rotate(0deg);
  -ms-transform: translateY(-6px) rotate(0deg);
  -o-transform: translateY(-6px) rotate(0deg);
  transform: translateY(-6px) rotate(0deg);
}
.open-nav .hamburger:after {
  right: 5px;
  -webkit-transform: translateY(6px) rotate(0deg);
  -moz-transform: translateY(6px) rotate(0deg);
  -ms-transform: translateY(6px) rotate(0deg);
  -o-transform: translateY(6px) rotate(0deg);
  transform: translateY(6px) rotate(0deg);
}
.open-nav:hover .hamburger:before,
.open-nav:hover .hamburger:after {
  right: 0px;
}
.open-nav .text {
  width: 65px;
  text-align: right;
  display: inline-block;
  font-family: 'raleway';
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  color: #0d0d0d;
  letter-spacing: 0.12em;
  transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s;
}
/* open nav state */
header.nav-is-open #menu .open-nav .hamburger {
  background-color: transparent;
  transition: background 0.1s ease;
}
header.nav-is-open #menu .open-nav .hamburger:before {
  width: 70%;
  right: 0px;
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
  background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .hamburger:after {
  width: 70%;
  right: 0px;
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
  background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .text {
  transition: width 0.4s ease, opacity 0.2s ease;
  width: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
nav#main-nav {
  float: left;
  visibility: hidden;
}
header.nav-is-open #menu nav#main-nav {
  visibility: visible;
}
nav#main-nav ul {
  list-style: none;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
nav#main-nav ul>li {
  margin: 0 0 0 20px;
  padding: 0;
  display: inline-block;
  position: relative;
  transition: top 0.3s ease 0.4s, opacity 0.3s ease;
  top: -5px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
nav#main-nav ul>li:first-child {
  margin: 0;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(2n) {
  transition: top 0.3s ease 0.5s, opacity 0.3s ease 0.5s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(3n) {
  transition: top 0.3s ease 0.6s, opacity 0.3s ease 0.6s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(4n) {
  transition: top 0.3s ease 0.7s, opacity 0.3s ease 0.7s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(5n) {
  transition: top 0.3s ease 0.8s, opacity 0.3s ease 0.8s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(6n) {
  transition: top 0.3s ease 0.9s, opacity 0.3s ease 0.9s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(7n) {
  transition: top 0.3s ease 1.0s, opacity 0.3s ease 1.0s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(8n) {
  transition: top 0.3s ease 1.1s, opacity 0.3s ease 1.1s;
}
header.nav-is-open #menu nav#main-nav ul>li {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  transition: top 0.3s ease 0.4s, opacity 0.3s ease 0.4s;
}
nav#main-nav ul li>a {
  display: inline-block;
  font-family: 'raleway';
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  color: #0d0d0d;
  letter-spacing: 0.12em;
  transition: all 100ms ease;
}
nav#main-nav>ul>li:hover>a,
nav#main-nav>ul>li.current-menu-item>a {
  color: #ea4452 !important;
}
/* submenu */
nav#main-nav ul li>ul.submenu {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 240px;
  padding-top: 20px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  visibility: hidden;
  transition: all 400ms ease;
}
nav#main-nav ul li:hover>ul.submenu {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 30px;
  transition: all 400ms ease;
}
nav#main-nav ul li>ul.submenu>li {
  margin: 0;
  padding: 2px 20px 2px 20px;
  display: block;
  position: relative;
  text-align: right;
  background: #0d0d0d;
}
nav#main-nav ul li>ul.submenu>li:first-child {
  padding-top: 15px;
}
nav#main-nav ul li>ul.submenu>li:last-child {
  padding-bottom: 15px;
}
nav#main-nav ul li>ul.submenu>li a {
  color: #ffffff;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
nav#main-nav ul li>ul.submenu>li a em,
nav#main-nav ul li>ul.submenu>li a i {
  font-size: 0.9em;
  text-transform: none;
  letter-spacing: 0.05em;
}
nav#main-nav ul li>ul.submenu>li a:hover,
nav#main-nav ul li>ul.submenu>li.current-menu-item>a {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=7-100)";
}
/* menu color switch */
header:not(.hero-invisible) .menu-light .open-nav .text {
  color: #ffffff;
}
header:not(.hero-invisible) .menu-light .open-nav .hamburger,
header:not(.hero-invisible) .menu-light .open-nav .hamburger:before,
header:not(.hero-invisible) .menu-light .open-nav .hamburger:after {
  background-color: #ffffff;
}
.menu-light nav#main-nav>ul>li>a {
  color: #ffffff;
}
header.nav-is-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a {
  color: #0d0d0d;
}
header.header-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a {
  color: #0d0d0d;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .text {
  color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before {
  background-color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after {
  background-color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before {
  background-color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after {
  background-color: #ffffff;
}
header.hero-invisible #menu .open-nav .text {
  color: #0d0d0d !important;
}
header.hero-invisible #menu .open-nav .hamburger,
header.hero-invisible #menu .open-nav .hamburger:before,
header.hero-invisible #menu .open-nav .hamburger:after {
  background-color: #0d0d0d !important;
}
header.nav-is-open #menu .open-nav .hamburger {
  background-color: transparent !important;
}
header.hero-invisible .menu-light nav#main-nav>ul>li>a {
  color: #0d0d0d;
}
/* header-open on page load */
header.header-open #menu .open-nav {
  display: none;
}
header.header-open #menu nav#main-nav {
  visibility: visible;
}
header.header-open nav#main-nav ul>li {
  transition: none;
  top: 0px;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

<!DOCTYPE html>
<html>
<head>
  <title>Where is my item?</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- HEADER -->
<header id="header">
  <div class="header-inner clearfix">
    <div id="menu" class="right-float clearfix">
      <a href="#" class="open-nav"><span class="hamburger"></span><span class="text">Menu</span></a>
      <nav id="main-nav">
        <ul>
          <li class="current-menu-item"><a href="#">Home</a>
            <li><a href="about.html">About Losta</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="#">EN </a>|<a href="index-masonry - copy.html">TH</a></li>
        </ul>
      </nav>
    </div>
    <!-- END .header-inner -->
</header>
<!-- HEADER -->
<body>
  <div class="my-block">
    <h1>WHERE IS MY ITEM?</h1>
    <h4>Find your item easily--without GPS tiles!</h4>
    <button class="button">Sign Up</button>
  </div>
</body>
</html>

请让我知道它有什么问题，以便我修复它。

非常感谢！

附言我刚开始写CSS，我只有13岁，所以请原谅我代码中的任何错误和故障！

Answer 1

在那里你可以使用一些Javascript:)

document.getElementById('menu').addEventListener("click", function() {
  document.getElementById('header').classList.toggle('nav-is-open');
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  display: table;
}
body {
  background-image: url("https://cdn.shopify.com/s/files/1/0862/7604/files/Sugar_Paper-Wedding_Agenda-Blog-2_1024x1024.jpg?v=1487113518")
}
body {
  background-size: cover;
}
.my-block {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
h1 {
  font-family: raleway;
  letter-spacing: 3px;
  color: Salmon;
}
h4 {
  font-family: raleway;
  font-weight: 100;
  letter-spacing: 1.5px;
  color: DarkGray;
  line-height: 200%
}
button {
  font-family: raleway;
  color: salmon;
  letter-spacing: 2px;
}
.button {
  background-color: darksalmon;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: 2px solid #E9967A;
  margin: 10px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}
.button:hover {
  background-color: transparent;
  color: black;
  border: 2px solid #FA8072;
}
.square {
  border: solid 21px #fffff;
  width: 30px;
  height: 30px;
}
span {
  font-family: raleway;
  font-weight: 300;
}
li {
  font-family: raleway;
}
text {
  font-family: montserrat;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0px;
  z-index: 10;
}
header.non-fixed {
  position: absolute;
}
header .header-inner {
  padding: 0px 40px;
  height: 0;
  margin-top: 60px;
  margin-bottom: 60px;
}
header .header-inner.wrapper {
  padding: 0;
}
#menu {
  position: relative;
  z-index: 10;
}
.open-nav {
  display: block;
  height: 30px;
  float: right;
  position: relative;
  z-index: 10;
  margin-left: 20px;
}
.open-nav .hamburger {
  display: inline-block;
  width: 22px;
  height: 2px;
  background-color: darksalmon;
  position: relative;
  top: -3px;
  transition: background 0.4s ease;
}
.open-nav .hamburger:before,
.open-nav .hamburger:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: darksalmon;
  right: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.4s, background 0.4s ease, right .2s ease;
  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease;
  -moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease;
  -o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease;
  -ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease;
}
.open-nav .hamburger:before {
  right: 2px;
  -webkit-transform: translateY(-6px) rotate(0deg);
  -moz-transform: translateY(-6px) rotate(0deg);
  -ms-transform: translateY(-6px) rotate(0deg);
  -o-transform: translateY(-6px) rotate(0deg);
  transform: translateY(-6px) rotate(0deg);
}
.open-nav .hamburger:after {
  right: 5px;
  -webkit-transform: translateY(6px) rotate(0deg);
  -moz-transform: translateY(6px) rotate(0deg);
  -ms-transform: translateY(6px) rotate(0deg);
  -o-transform: translateY(6px) rotate(0deg);
  transform: translateY(6px) rotate(0deg);
}
.open-nav:hover .hamburger:before,
.open-nav:hover .hamburger:after {
  right: 0px;
}
.open-nav .text {
  width: 65px;
  text-align: right;
  display: inline-block;
  font-family: 'raleway';
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  color: darksalmon;
  letter-spacing: 0.12em;
  transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s;
}
/* open nav state */
header.nav-is-open #menu .open-nav .hamburger {
  background-color: transparent;
  transition: background 0.1s ease;
}
header.nav-is-open #menu .open-nav .hamburger:before {
  width: 70%;
  right: 0px;
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
  background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .hamburger:after {
  width: 70%;
  right: 0px;
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
  background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .text {
  transition: width 0.4s ease, opacity 0.2s ease;
  width: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
nav#main-nav {
  float: left;
  visibility: hidden;
}
header.nav-is-open #menu nav#main-nav {
  visibility: visible;
}
nav#main-nav ul {
  list-style: none;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
nav#main-nav ul>li {
  margin: 0 0 0 20px;
  padding: 0;
  display: inline-block;
  position: relative;
  transition: top 0.3s ease 0.4s, opacity 0.3s ease;
  top: -5px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#menu {
  position: relative;
  z-index: 10;
}
.open-nav {
  display: block;
  height: 30px;
  float: right;
  position: relative;
  z-index: 10;
  margin-left: 20px;
}
.open-nav .hamburger {
  display: inline-block;
  width: 22px;
  height: 2px;
  background-color: #0d0d0d;
  position: relative;
  top: -3px;
  transition: background 0.4s ease;
}
.open-nav .hamburger:before,
.open-nav .hamburger:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #0d0d0d;
  right: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.4s, background 0.4s ease, right .2s ease;
  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease;
  -moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease;
  -o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease;
  -ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease;
}
.open-nav .hamburger:before {
  right: 2px;
  -webkit-transform: translateY(-6px) rotate(0deg);
  -moz-transform: translateY(-6px) rotate(0deg);
  -ms-transform: translateY(-6px) rotate(0deg);
  -o-transform: translateY(-6px) rotate(0deg);
  transform: translateY(-6px) rotate(0deg);
}
.open-nav .hamburger:after {
  right: 5px;
  -webkit-transform: translateY(6px) rotate(0deg);
  -moz-transform: translateY(6px) rotate(0deg);
  -ms-transform: translateY(6px) rotate(0deg);
  -o-transform: translateY(6px) rotate(0deg);
  transform: translateY(6px) rotate(0deg);
}
.open-nav:hover .hamburger:before,
.open-nav:hover .hamburger:after {
  right: 0px;
}
.open-nav .text {
  width: 65px;
  text-align: right;
  display: inline-block;
  font-family: 'raleway';
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  color: #0d0d0d;
  letter-spacing: 0.12em;
  transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s;
}
/* open nav state */
header.nav-is-open #menu .open-nav .hamburger {
  background-color: transparent;
  transition: background 0.1s ease;
}
header.nav-is-open #menu .open-nav .hamburger:before {
  width: 70%;
  right: 0px;
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
  background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .hamburger:after {
  width: 70%;
  right: 0px;
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
  background-color: #0d0d0d;
}
header.nav-is-open #menu .open-nav .text {
  transition: width 0.4s ease, opacity 0.2s ease;
  width: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
nav#main-nav {
  float: left;
  visibility: hidden;
}
header.nav-is-open #menu nav#main-nav {
  visibility: visible;
}
nav#main-nav ul {
  list-style: none;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
nav#main-nav ul>li {
  margin: 0 0 0 20px;
  padding: 0;
  display: inline-block;
  position: relative;
  transition: top 0.3s ease 0.4s, opacity 0.3s ease;
  top: -5px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
nav#main-nav ul>li:first-child {
  margin: 0;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(2n) {
  transition: top 0.3s ease 0.5s, opacity 0.3s ease 0.5s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(3n) {
  transition: top 0.3s ease 0.6s, opacity 0.3s ease 0.6s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(4n) {
  transition: top 0.3s ease 0.7s, opacity 0.3s ease 0.7s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(5n) {
  transition: top 0.3s ease 0.8s, opacity 0.3s ease 0.8s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(6n) {
  transition: top 0.3s ease 0.9s, opacity 0.3s ease 0.9s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(7n) {
  transition: top 0.3s ease 1.0s, opacity 0.3s ease 1.0s;
}
header.nav-is-open #menu nav#main-nav ul>li:nth-child(8n) {
  transition: top 0.3s ease 1.1s, opacity 0.3s ease 1.1s;
}
header.nav-is-open #menu nav#main-nav ul>li {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  transition: top 0.3s ease 0.4s, opacity 0.3s ease 0.4s;
}
nav#main-nav ul li>a {
  display: inline-block;
  font-family: 'raleway';
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  color: #0d0d0d;
  letter-spacing: 0.12em;
  transition: all 100ms ease;
}
nav#main-nav>ul>li:hover>a,
nav#main-nav>ul>li.current-menu-item>a {
  color: #ea4452 !important;
}
/* submenu */
nav#main-nav ul li>ul.submenu {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 240px;
  padding-top: 20px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  visibility: hidden;
  transition: all 400ms ease;
}
nav#main-nav ul li:hover>ul.submenu {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 30px;
  transition: all 400ms ease;
}
nav#main-nav ul li>ul.submenu>li {
  margin: 0;
  padding: 2px 20px 2px 20px;
  display: block;
  position: relative;
  text-align: right;
  background: #0d0d0d;
}
nav#main-nav ul li>ul.submenu>li:first-child {
  padding-top: 15px;
}
nav#main-nav ul li>ul.submenu>li:last-child {
  padding-bottom: 15px;
}
nav#main-nav ul li>ul.submenu>li a {
  color: #ffffff;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
nav#main-nav ul li>ul.submenu>li a em,
nav#main-nav ul li>ul.submenu>li a i {
  font-size: 0.9em;
  text-transform: none;
  letter-spacing: 0.05em;
}
nav#main-nav ul li>ul.submenu>li a:hover,
nav#main-nav ul li>ul.submenu>li.current-menu-item>a {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=7-100)";
}
/* menu color switch */
header:not(.hero-invisible) .menu-light .open-nav .text {
  color: #ffffff;
}
header:not(.hero-invisible) .menu-light .open-nav .hamburger,
header:not(.hero-invisible) .menu-light .open-nav .hamburger:before,
header:not(.hero-invisible) .menu-light .open-nav .hamburger:after {
  background-color: #ffffff;
}
.menu-light nav#main-nav>ul>li>a {
  color: #ffffff;
}
header.nav-is-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a {
  color: #0d0d0d;
}
header.header-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a {
  color: #0d0d0d;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .text {
  color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before {
  background-color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after {
  background-color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before {
  background-color: #ffffff;
}
header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after {
  background-color: #ffffff;
}
header.hero-invisible #menu .open-nav .text {
  color: #0d0d0d !important;
}
header.hero-invisible #menu .open-nav .hamburger,
header.hero-invisible #menu .open-nav .hamburger:before,
header.hero-invisible #menu .open-nav .hamburger:after {
  background-color: #0d0d0d !important;
}
header.nav-is-open #menu .open-nav .hamburger {
  background-color: transparent !important;
}
header.hero-invisible .menu-light nav#main-nav>ul>li>a {
  color: #0d0d0d;
}
/* header-open on page load */
header.header-open #menu .open-nav {
  display: none;
}
header.header-open #menu nav#main-nav {
  visibility: visible;
}
header.header-open nav#main-nav ul>li {
  transition: none;
  top: 0px;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

<!DOCTYPE html>
<html>
<head>
  <title>Where is my item?</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- HEADER -->
<header id="header">
  <div class="header-inner clearfix">
    <div id="menu" class="right-float clearfix">
      <a href="#" class="open-nav"><span class="hamburger"></span><span class="text">Menu</span></a>
      <nav id="main-nav">
        <ul>
          <li class="current-menu-item"><a href="#">Home</a>
            <li><a href="about.html">About Losta</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="#">EN </a>|<a href="index-masonry - copy.html">TH</a></li>
        </ul>
      </nav>
    </div>
    <!-- END .header-inner -->
</header>
<!-- HEADER -->
<body>
  <div class="my-block">
    <h1>WHERE IS MY ITEM?</h1>
    <h4>Find your item easily--without GPS tiles!</h4>
    <button class="button">Sign Up</button>
  </div>
</body>
</html>

Answer 2

你可以使用 jquery 或 javascript 来获得相同的结果

如果你想用javascript做到这一点，那么请转到@JV Lobo答案

如果你想用jQuery来做到这一点，那么使用以下代码

$(document).ready(function(){
    $('#menu').click(function(){
      $('header').toggleClass('nav-is-open');
   });
 });