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

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所有显示的内容时，问题就不会来自这里。

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

奇怪的是它在示例中有效，并且我尝试尊重相同的元素层次结构。

任何帮助表示赞赏。

标签： javascripthtmlcssangularjsgoogle-apps-script

Answer 1

你悬停在第一个<li>没有<ul>孩子的地方。那是在第二个<li>。我把小时候的下拉菜单放到了 first<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>