Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box.
I have been referring to this sample code for guidance.
Instead of pasting all my code here, I can summarize what I have come up with:
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>My objective is to display the submenu, but I suspect an issue with the CSS snippet li:hover > ul.
I am essentially creating a list that iterates through an array to generate the first item, followed by another list nested inside items from array[1].
Removing the display: none reveals everything, ruling out this as the root cause.
In the beginning, I considered it might be due to limitations of the google app script HTML service, yet encountering the same problem on JSFiddle disproved this notion.
The perplexing part is that it functions correctly in the example, and I have tried mimicking the same element structure.
Any assistance would be greatly valued.