jquery - 创建垂直多级菜单

Question

我正在尝试创建一个带有一些子菜单的垂直菜单栏。
这是我尝试过的。

<div  class="col-xs-2 col-sm-2">
  <ul class="nav nav-tabs">
   <li><a href="#">aaa</a>
   <ul>
   <li><a href="#">xxxxxxx</a></li>
   <li><a href="#">yyyyyyyy</a></li>
   <li><a href="#">cccccc</a></li>
   </ul>
   </li>
   <li><a href="#">bbb</a></li>
   <li><a href="#">ccc</a></li>

  </ul>
</div>

https://jsfiddle.net/ejt1xznu/

但是，当我点击主菜单时，子菜单显示不正确。我做错了什么？有人可以帮助我吗？
否则有什么办法可以正确使用 jquery 或 angular 吗？

Answer 1

HTML 中的大多数标签 都有一些默认样式，同样这里的ul 标签有一个默认样式padding-left: 40 像素；。将其重置为 padding-left:0px; 后，它会正确对齐其余链接。

默认 ul 样式，

ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

ul{
  padding:0;
}
ul ul>li {
  display:none;
}
ul li:active li{
  display:block;
}

<div  class="col-xs-2 col-sm-2">
  <ul class="nav nav-tabs">
   <li><a href="#">aaa</a>
   <ul>
   <li><a href="#">xxxxxxx</a></li>
   <li><a href="#">yyyyyyyy</a></li>
   <li><a href="#">cccccc</a></li>
   </ul>
   </li>
   <li><a href="#">bbb</a></li>
   <li><a href="#">ccc</a></li>

  </ul>
</div>