需要汉堡包内的菜单

Question

下面有一个汉堡菜单：

我想要这样的事情：

在上面的图片中，第4项内部有另一个菜单，我希望为我的汉堡包菜单创建相同的菜单。

我的汉堡代码是：

.sidenav {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    /* background-color: #111; */
    background-color: #45169B;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: medium;
    /* color: #818181; */
    display: block;
    transition: 0.3s;
    border-bottom:1px solid black;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
        border-bottom: 0px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 36px;
    margin-left: 50px;
}

/* #main {
    transition: margin-left .5s;
    padding: 16px;
} */

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
.leftFloat{
    float:left;
}
::-webkit-scrollbar {
    width: 0px !important;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

HTML：

<div id="mySidenav" class="sidenav">
                        <a href="javascript:void(0)" class="white closebtn" onclick="closeNav()">×</a>

                        <a href="#" id="refresh" class="white" style="border-top: 1px solid black;"><i class="fa fa-refresh white" aria-hidden="true"></i> &nbsp;Refresh</a>    
                        <a class="white excelPointer" href="fleetonmapvts.html" id="fleetOnMap"><i class="fa fa-map-marker white" aria-hidden="true"></i>&nbsp;&nbsp;Fleet On Map</a>
                        <a href="schedulereportsvts.html" id="scheduleReportsli" class="white"><i class="fa fa-bar-chart white" aria-hidden="true"></i> &nbsp;Schedule Reports</a>
                        <a href="javascript:showMoadlAddReports()" id="showReportAdd" class="white"><i class="fa fa-tasks white" aria-hidden="true"></i> &nbsp;Add Reports</a>
                        <a href="#" class="white" id="logout"><i class="fa fa-power-off white" aria-hidden="true"></i> &nbsp;Logout</a>
                    </div>

如何使用css实现此目的？

任何人都可以帮助我吗？

Answer 1

根据您的标记使用此选项。由于您的CSS代码无法正常工作。 我已经创建了基本的标记和js功能。

＆＃13;

＆＃13;

$(function(){
			$(".has-submenu").on('click', function(event) {
				event.preventDefault();
				$(this).nextAll('.level2').toggle();
				$(this).toggleClass('active');
			});
		})

＆＃13;

a{
			display: block;
			padding: 10px;
			color: #444;
			text-decoration: none;
			border: 1px solid #222;
		}
		.level2 {
			padding-left: 35px;
			background-color: #efefef;
			display: none;
		}
		.caret {
			float: right;
			border-top: 15px solid #ccc;
			border-right: 7px solid transparent;
			border-left: 7px solid transparent;
		}
		.active {
			background-color: #f5f5f5;
		}
		.active .caret{
			border-top: none;
			border-bottom: 15px solid #ccc;
		}

＆＃13;

<div class="sidenav">
		<a href="#" class="level-1">Lorem</a>
		<a href="#" class="level-1">Lorem</a>
		<a href="#" class="level-1 has-submenu">
			Lorem
			<i class="caret"></i>
		</a>
		<a href="#" class="level2">
			Sub menu
		</a>
		<a href="#" class="level2">
			Sub menu
		</a>
		<a href="#" class="level2">
			Sub menu
		</a>
		<a href="#" class="level2">
			Sub menu
		</a>
		<a href="#" class="level-1">Lorem</a>
		<a href="#" class="level-1">Lorem</a>
		<a href="#" class="level-1">Lorem</a>
		<a href="#" class="level-1">Lorem</a>
		<a href="#" class="level-1">Lorem</a>
	</div>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

＆＃13;

＆＃13;

＆＃13;