plnkr/starters: Starter templates for Plunker

<!doctype html>

<html>
  <head>
   
    <script src="lib/script.js"></script>

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="lib/style.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js" >
</script>

<script 
type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js"></script>


  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
     <div id="wrapper1" class="container">
       <div id="nav1">
       <div><span></span> </div>
             <ul>
                <li ng-repeat="menu in menus" class="has-children" ng-click="changeClass(menu)" lastOrFirst="{{menu.lastOrFirst}}" >
                  <a href="{{menu.url}}">{{menu.title}} <span ></span></a>
                  <ul ng-if="menu.menus">
                   <li ng-repeat="submenu in menu.menus" class="has-children">
                      <a href="{{submenu.action}}">{{submenu.title}}</a>
                          <ul ng-if="submenu.menus" ng-class="submenu.class">
                            <li ng-repeat="subsubmenu in submenu.menus">
                              <a href="{{subsubmenu.action}}">{{subsubmenu.title}}</a>
                            </li>
                          </ul>
                    </li>
                    
                  </ul>
                </li>
              </ul>
        </div>
    </div>
    </div>
  </body>
</html>

import angular from 'angular';

angular.module('plunker', []).controller('MainCtrl', function($scope) {
 $scope.menus = [
    {

        title: "Home",
        type: "GET",
        url:'#'
    },
    {

        title: "News",
        action: "#",
        menus: [
          {
              title: "Local", 
              type:"GET",
              action: "#"
          },
          {
              title: "Kerala",
              action: "#"
          },
          {
              title: "National",
              action: "#"
          },
          {
              title: "World",
              action: "#"
          }
        ]
    },
    {
        title: "Entertainment",
        action: "#",
        menus: [
        {
            title: "Malayalam",
            action: "#"
        },
        {
            title:"Tamil",
            action:"#"
        },
        {
            title:"Hindi",
            action:"#"
        },
        {
            title:"English",
            action:"#"
        }
            
      ]
    }
];
});
});

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

h1,
p {
    font-family: sans-serif;
}
 #wrapper1
        {
            width: auto;
            margin: 10px;
            text-align: left;
        }
        #nav1 div {color:Red; margin:10px;}
        #nav1 ul{list-style-type:none; padding:0; margin:0; }
        #nav1 ul li {display:inline-block; background-color:#E0E0E0; min-width:150px;}
        #nav1 ul li 
        {
            background-image:linear-gradient(to bottom, #ffffff, #eaeaea);
            background-repeat: repeat-x;
            border-bottom: 1px solid #d1d1d1;
            border-top: 1px solid #eaeaea;
            border-left: 1px solid #eaeaea;
            border-right: 1px solid #eaeaea;
                 /* background: -webkit-linear-gradient(#EDEDED, #FFFFFF);  For Safari 5.1 to 6.0 
                  background: -o-linear-gradient(#EDEDED, #FFFFFF);  For Opera 11.1 to 12.0 
                  background: -moz-linear-gradient(#EDEDED, #FFFFFF); For Firefox 3.6 to 15 
                  background: linear-gradient(#EDEDED, #FFFFFF);  Standard syntax */
                }
        #nav1 ul li:hover{background-color:#FFF; }
        #nav1 ul li:hover{ background-image:linear-gradient(to bottom, #eaeaea, #ffffff);
            background-repeat: repeat-x;
            border-bottom: 1px solid #eaeaea;
            border-top: 1px solid #d1d1d1;
            border-left: 1px solid #eaeaea;
            border-right: 1px solid #eaeaea;
            }
        #nav1 ul li:hover > a
         {
             border-bottom-color:#FFF;
             outline:0;
             text-decoration:none;
             border-top:solid 2px #1971c4;
             padding-top:12px;
             color:#1971c4;
             }
         #nav1 ul ul li:hover > a
         {
             border-top: 1px solid #eaeaea;
             }
         #nav1 ul li.has-children > a:after {
            content: "";
            background: url("http://www.cmegroup.com/etc/designs/cmegroup/cmegroupClientLibs/images/cme-header-sprite.png") no-repeat;
            width: 8px;
            height: 8px;
            display: inline-block;
            margin-left:5px;
        }
        #nav1 ul li a,visited{display:block; padding:15px; color:#888; text-decoration:none;}
        #nav1 ul li:hover > ul{display:block;}
        #nav1 ul li a:hover{color:#444;}
        #nav1 > ul li:hover a{color:#444;}
        
        #nav1 ul ul li{display:block;}
        #nav1 ul ul{display:none; position:absolute; background-color:#FFF; min-width:225px;}
        #nav1 ul ul li:hover{background-color:#F9F9F9;}
        #nav1 ul li:hover ul li a,visited{color:#888;}
        #nav1 ul ul li:hover ul{display:block;}
        #nav1 ul ul ul {margin: -47px 0 0 224px; background-color:#F9F9F9;}
        #nav1 ul ul ul li a:hover{color:#444;}
        #nav1 {vertical-align:middle; text-align:center;}

{
  "name": "@plnkr/starter-angularjs",
  "version": "1.0.1",
  "description": "AngularJS starter template",
  "dependencies": {
    "angular": "^1.6.9"
  },
  "plnkr": {
    "runtime": "system",
    "useHotReload": false
  }
}