Jquery 导航栏中未显示子菜单

我有一个反应灵敏（嗯，有点）的布局

然而，我正在努力寻找一种方法来添加一个“小节”（使其类似于手风琴导航菜单）

我没有最好的css知识，因此非常感谢您的帮助

css的片段：

@media only screen and (max-width : 860px){ 
  .text{
    display:none;
  }

  .nav-container , a{
    width: 70px;

  }

  a:hover{
    width:200px; 
    z-index:1;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid black;
    box-shadow: 0 0 1px 1px black;
  }

  a:hover  .text {
    display:block;
    padding-left:30%;
  }
}
@media only screen and (max-width : 480px){
  .nav-container, a{ width:50px;}
  span[class ^= "icon"]{ left:8px;}
}

我正在尝试创建一个“子菜单”，如：

+----------------+-----+
|                |     |
||Menu1          |     |
| |sub menuA     | ||| |
||Menu2          |     |
| |sub menuB     |     |
|                |     |
+----------------+-----+
                    ^
                    |
              DevExpress content splitter

为了实现这一目标，我应该如何构建我的

子孩子

课程

到目前为止，我的职能是：

$('li').click(function () {

    $(this).addClass('active')
         .siblings()
         .removeClass('active');
});

非常感谢您的任何建议/帮助

---

这就是我的项目目前的显示方式（或“不”显示方式：L）-您必须原谅内联样式，它主要是通过大量测试/etc解决的！

我能够从@Paulie_D的建议中获得答案，即查看

a

和

li

区块内的高度

在行动中展示它

如下图所示删除“高度”属性将提供：

li{
  /*height:50px; */
  position:relative;
  background: linear-gradient(#292929, #242424);
}

a {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid black;
  text-decoration:none;
  display:block;
  /*height:100%;*/
  width:100%;
  line-height:50px;
  color:#bbb;
  text-transform: uppercase;
  font-weight: bold;
  padding-left:25%;
  border-left:5px solid transparent;
  letter-spacing:1px;
  transition: all 0.3s linear;
}

---

@Paulie_D抱歉，是标签中的老把戏。现在更新如果你从

li

中删除高度，子菜单已经在那里了。然后你所要做的就是默认隐藏它，并在单击父菜单时显示它。你让它听起来很简单！web开发与winforms/任何“可关联”的东西完全不同