почему мое раскрывающееся меню не отображается при наведении курсора?

Question

Я создаю меню, используя angularJS и скрипт приложения Google в диалоговом окне.

Я использую этот пример кода в качестве ссылки.

такбез необходимости копировать и вставлять весь мой код, вот что я придумала:

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 скрипта приложения Google, но когда я попробовал этот код на 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>