javascript - 为什么悬停时我的下拉菜单不显示？

Question

我正在对话框中使用 angularJS 和 google app script 创建一个菜单。

我正在使用 this example code作为引用。

因此，无需在此处复制和粘贴我的所有代码，这基本上就是我想出的:

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 时，一切都显示出来，所以问题不在此处。

起初我虽然这是谷歌应用程序脚本 HTML 服务的限制，但当我在 JSFiddle 上尝试此代码时我遇到了同样的问题。

奇怪的是它在示例中有效，而且我已经尝试遵守相同的元素层次结构。

感谢任何帮助。

Answer 1

您正悬停在第一个 <li> 上没有 <ul> child 。那是在第二个<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>