列表项的子项涵盖整个列表

Question

我正在尝试使用css和javascript实现，当单击初始列表项时，列表项和子列表将展开以覆盖列表并仅显示所选列表项。如果这是有道理的。

https://jsfiddle.net/dj1xshzo/

目前我创建了这个列表：

.nav ul li > ul{
  display:none;
}
.nav ul li.open > ul{
  display:block;
}
.nav ul {
  padding:0;
}
.nav ul li{
  list-style:none;
  padding:0px;
}
.nav > ul li{
  font-size:2em;
}
.nav > ul li > ul li{
  font-size:16px;
}