如何在主菜单中包含子菜单？

Question

我是一名本科生，我正在建立一个项目网站。

现在，我正在制作“移动版”，在我的网站上添加媒体查询，我想制作一个汉堡菜单。 在此picture是我迄今为止所做的。

我想在菜单标签中添加一个链接，所以当我按下“菜单”标签时，网站会跳转到另一个div（带有新标签的新菜单）。

只需几句话，我想在多菜单中更改它。

我很抱歉我的英语，我用我的语法尝试了最好的。

我根本不能使用JQuery ..

提前致谢！

这是我的代码：

#menu {  visibility: hidden;	}

#DropMobile {  display: none;	}

label {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 20px;
  height: 2px;
  background:  rgba(229,229,229,0.88);
  cursor: pointer;
  transition: 0.6s;
  z-index: 10;
}

label:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  margin: 0;
  padding: 0;
  background: rgba(229,229,229,0.88);
  transition: 0.6s;
  transform: translateY(5px);
  z-index: 99;
}

label:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  margin: 0;
  padding: 0;
  background: rgba(229,229,229,0.88);
  transition: 0.6s;
  transform: translateY(-5px);
}

label div {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: display 5s ease-in-out;
}

label div nav ul {  margin-top: 25%; padding: 0;  list-style-type: none;}

label div nav ul li {  margin: 5% 0;  text-align: center;}

label div nav ul li a {
  display: inline-block;
  font-family: 'Catamaran', sans-serif;
  font-size: 1em;
  text-decoration: none;
  color: rgba(229,229,229,0.9);
  padding-bottom: 5px;
}

#menu:checked + label {  width: 0;}

#menu:checked + label div {
  display: block;
  background: black;
  opacity: 0.9;
  transition: opacity 2s linear;
}

#menu:checked + label:before {
  background: rgba(229,229,229,0.88);;
  transform: rotate(38deg) translate(0px);
}

#menu:checked + label:after {
  background: rgba(229,229,229,0.88);;
  transform: rotate(-38deg) translate(0px);
}

<header id="MenuMobile">
	<input type="checkbox" id="menu">
	<label for="menu">
		<div>
			<nav role="navigation">
				<ul>
					<li> <a href="index.html"> Home </a>	</li>		
					<li> <a> Menu </a>				
					<li> <a href="reservation.php">Reservation</a>	</li>
					<li> <a href="about.html">About Us</a>	</li>
					<li> <a href="contact.php">Contact</a>	</li>
				</ul>
			</nav>	
		</div>
	</label>
</header>