Question

我正在使用对话框内的angularJS和google app脚本创建菜单。

因此，不必在这里复制和粘贴所有代码，基本上就是我想到的：

var app = angular.module('myApp', []);

app.controller('mainCtrl', function($scope) {
  $scope.menu = [
    ["first", 
      ["item1", "item 2"]],
    ["second", 
      ["item 1", "item 2"]]
  ];
});

li {
  list-style: none;
}

li ul {
  display: none;
}

.firstLevel {
  display: inline-block;
}

li:hover>ul {
  display: block;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
  <ul>
    <div ng-repeat="m in menu" class="firstLevel">
      <li>
        <a href="#">{{m[0]}}-</a>
      </li>
      <li>
        <ul>
          <div ng-repeat="msub in m[1]">
            <a>{{msub}}</a>
          </div>
        </ul>
      </li>
    </div>
  </ul>
</div>

我希望该子菜单显示，我怀疑这段CSS存在问题 li:hover > ul。

所以我在这里要做的是创建一个列表，该列表通过数组为第一个项目进行解析，然后创建另一个在项目或array[1]内部进行解析的列表。当我删除display: none所有显示内容时，问题就不会出在这里。

起初，我虽然是google app脚本HTML服务的局限性，但是当我在JSFiddle上尝试此代码时，我遇到了同样的问题。

奇怪的是，它可以在示例中使用，并且我尝试遵循相同的元素层次结构。

感谢您的帮助。

Answer 1

您将鼠标悬停在没有<li>子代的第一个<ul>上。那是第二个<li>。我将儿童下拉菜单放到了第一个<li>中，现在可以使用了。

var app = angular.module('myApp', []);

app.controller('mainCtrl', function($scope) {
  $scope.menu = [
    ["first", 
      ["item1", "item 2"]],
    ["second", 
      ["item 1", "item 2"]]
  ];
});

li {
  list-style: none;
}

li ul {
  display: none;
}

.firstLevel {
  display: inline-block;
}

li:hover>ul {
  display: block;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
  <ul>
    <div ng-repeat="m in menu" class="firstLevel">
      <li>
        <a href="#">{{m[0]}}-</a>
         <ul>
          <div ng-repeat="msub in m[1]">
            <a>{{msub}}</a>
          </div>
        </ul>
      </li>
    </div>
  </ul>
</div>

为什么悬停时我的下拉菜单没有显示？

1 个答案: