Navbar 问题的 HTML 重组

Question

我试图让 children 不影响导航栏，并像下拉菜单一样显示。

当前示例位于:dev4you.byethost15.com

函数应该如下:

1. 用户将鼠标悬停在父项上
2. 子项显示在类似列表、Underneath 的框中。

目前发生的情况是，当子级显示在父级悬停时，导航栏被向下推以进行补偿，我不想要该功能，我正在尝试在此处创建一个下拉菜单。

如果这个建议不是最佳的，也欢迎其他 html 结构建议。

HTML

<div class="row">
      <div class="navbar-header col-md-8">
        <a class="navbar-brand" rel="home">Portal</a>
      </div>
      <ul class="nav navbar-nav" ng-repeat="item in data">
          <li class="innerLi"><a ng-mouseover="isChildrenVisible=true" ng-mouseleave= "isChildrenVisible=false">{{item.title}}</a></li>
          <ul style="padding-left:20px;">
            <li class="menuchild" ng-show="isChildrenVisible" ng-repeat="child in item.children ">
                    <p>{{child.title}}</p>
            </li>
          </ul>
      </ul>
    </div>

Answer 1

在你的内在 child li 中使用这些 css 设置。

<li ng-show="isChildrenVisible" ng-repeat="child in item.children " class="ng-scope ng-hide innerLi" 
">
 <p class="ng-binding">Long Sub2</p></li> 

CSS:

  .innerLi{
      position: absolute;
      top: 65%;
      margin-left: -25px;
    }