Question

我正在尝试创建一个带有子菜单的verical menuBar。
这就是我尝试过的。

<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或角度正确吗？

Answer 1

HTML中的每个tag大部分都有default styling，此处ul标记的默认样式为padding-left:40px;。将其重置为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;
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您正在显示子菜单：活动。：释放菜单单击后，活动状态将丢失。这就是它立刻被隐藏的原因。如果您使用：hover伪类，则可以修复您的问题。

ul li:hover li{
  display:block;
}

创建垂直多级菜单

2 个答案: