TANDEROID,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
#menu{
width: 100%;
min-height: 45px;
background-color: #363636;
font-size: 38px;
text-align: center;
color: white;
font-family: arial;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
cursor: pointer;
}
#menu div{
font-size: 0px;
border-top: 0;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
#menu .big > div, #menu.big > div{
font-size: 38px;
border-top: 3px solid white;
}
#menu.big > div{
background-color: #4F4F4F;
}
#menu.big > div > div{
background-color: #696969;
}
#menu.big > div > div > div{
background-color: #828282;
}
.open:before {
content: "+";
}
.open.big:before {
content: "-";
}
</style>
<div id="menu" class="open" >
Меню
<div class="open" >
П1
<div class="mList2">ПП2</div>
<div class="mList2">ПП3</div>
</div>
<div class="mList1">
П2
</div>
<div class="mList1">
П3
</div>
<div class="open" >
П4
<div class="open" >
ПП1
<div class="mList3">ППП1</div>
<div class="mList3">ППП2</div>
<div class="mList3">ППП3</div>
</div>
<div class="mList2">ПП2</div>
<div class="mList2">ПП3</div>
</div>
</div>
<script>
[].forEach.call(document.querySelectorAll(".open"), function(block) {
block.addEventListener("click", function(event) {
if (block != event.target) return;
event.stopPropagation();
block.classList.toggle("big");
[].forEach.call(block.querySelectorAll(".big"), function(big) {
big.classList.remove("big")
})
})
});
</script>
</body>
</html>