0
CSSスタイルを適用した後、最後のメニュー項目のみが表示されます。 CSSなし（スタイルタグ）を試している場合、フルメニューが表示されます。動的ドロップダウンメニューの作成に関する問題（AngularJS、CSS、JSONの使用）
変更する必要はありますか？
下記のコードスニペットをご覧ください。
<html>
<head>
<meta charset="ISO-8859-1">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var helloAjaxApp = angular.module("myApp", []);
helloAjaxApp.controller("myCtrl3", function($scope) {
var data =[{"name":"home","submenus":[]},{"name":"enrollment","submenus":[{"name":"New Enrollment","submenus":[{"name":"Ekyc"},{"name":"Non_ekyc"}]},{"name":"Modify Old","submenus":[{"name":"Ekyc"},{"name":"Non_ekyc"}]}]},{"name":"User Module","submenus":[{"name":"Create","submenus":[]},{"name":"Modify","submenus":[]},{"name":"Delete","submenus":[]}]}];
$scope.menus =data;
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
background: #333;
margin: 15px;
}
h1 {
font-size: 45px;
font-weight: 100;
letter-spacing: 15px;
text-align: center;
}
h1, #main_content, #dog_link {
padding: 15px;
}
p {
margin: 15px 0;
}
a {
color: #06c;
}
#main_nav ul {
background: white;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
width: 150px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav > ul > li > a, h1 {
text-transform: uppercase;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body >
<h1 align="center">Home Page</h1>
<div ng-app="myApp">
<div ng-controller="myCtrl3">
<nav id="main_nav">
<ul ng-repeat="menu in menus" >
<li><a href="#" >{{menu.name}}</a>
<ul ng-repeat="submenu1 in menu.submenus" >
<li><a href="#" >{{submenu1.name}}</a>
<ul ng-repeat="submenu2 in submenu1.submenus" >
<li><a href="#" >{{submenu2.name}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>