Question

我试图让孩子们不影响导航栏，并且显示的方式与下拉菜单完全相同。

目前的例子： dev4you.byethost15.com

功能应如下：

用户悬停在父项上
儿童会显示在列表框中，如下面。

目前正在发生的事情是当孩子们在父母悬停时显示，然后按下导航栏进行补偿，我不想要这个功能，我想在这里创建一个下拉菜单。

如果这个建议不是最佳的，那么其他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

在内心的孩子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;
    }

Navbar问题的HTML重组

1 个答案: