JSFiddle - React, Tailwind, and code Playground

by Neeraj Sonar

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<body ng-app="rcfdto">
<div class="menu container" ng-controller="menuController">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li ng-repeat="loc in locs" ng-class="{'dropdown-submenu' : loc.submenu && loc.submenu.length}">
        <a href="{{loc.link}}" id="{{loc.id}}">{{loc.name}}</a>
          <ul ng-if="loc.submenu && loc.submenu.length" class="dropdown-menu">
            <li ng-repeat="subloc in loc.submenu">
              <a href="{{subloc.link}}" id="{{subloc.id}}">{{subloc.name}}</a>
                <ul ng-if="subloc.subsubmenu && subloc.subsubmenu.length" class="dropdown-menu">
                  <li ng-repeat="subsubloc in subloc.subsubmenu">
                    <a href="{{subsubloc.link}}" id="{{subsubloc.id}}">{{subsubloc.name}}</a>
                  </li>
                </ul>
            </li>
          </ul>
      </li>
    </ul>
  </div>

CSS

.menu {
	position:relative;
}
.menu > .dropdown-menu {
	position:static;
	display:block;
}

JavaScript

var App = angular.module("rcfdto",[]);

App.controller("menuController", ['$scope', function($scope){
    $scope.locs = [
		{
			name: "Menu Option #1",
			link: "#OP1",
			id: "Option1",
			submenu: null
		},
		{
			name: "Menu Option #2",
			link: "#OP2",
			id: "Option2",
			submenu: [
				{
					name: "Submenu Option 1",
					link: "#SOP1",
					id: "SubOption1",
					subsubmenu: null
				},
				{
					name: "Submenu Option 2",
					link: "#SOP2",
					id: "SubOption2",
					subsubmenu: null
				},
				{
					name: "Submenu Option 3",
					link: "#SOP3",
					id: "SubmenuOption3",
					subsubmenu: [
						{
							name: "SubSubMenu Option 1",
							link: "#SSOP1",
							id: "SubSubmenuOption1"
						},
						{
							name: "SubSubMenu Option 2",
							link: "#SSOP2",
							id: "SubSubmenuOption2"
						}
					]
				}
			]
		},
		{
			name: "Menu Option #3",
			link: "#OP3",
			id: "Option3",
			submenu: [
				{
					name: "Submenu Option 4",
					link: "#SOP4",
					id: "SubmenuOption4",
					subsubmenu: [
						{
							name: "SubSubMenu Option 3",
							link: "#SSOP3",
							id: "SubSubmenuOption3"
						}
					]
				},
				{
					name: "Submenu Option 5",
					link: "#SOP5",
					id: "SubmenuOption5",
					submenu: null
				}
			]
		}
    ];
}]);