JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="TreeCtrl">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
      <li class="menu-item dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="menu-item dropdown dropdown-submenu">
            <tree family="treeFamily"></tree>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

CSS

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

JavaScript

var module = angular.module('myapp', []);

module.controller("TreeCtrl", function($scope) {
  $scope.treeFamily = {
    name: "Level1",
    children: [{
      name: "Link1",
      children: []
    }, {
      name: "Level2",
      children: [{
        name: "Link3",
        children: []
      }, {
        name: "Level3",
        children: [{
          name: "Link4",
          children: []
        }]
      }]
    }]
  };
});

module.factory('RecursionHelper', ['$compile', function($compile) {
  var RecursionHelper = {
    compile: function(element) {
      var contents = element.contents().remove();
      var compiledContents;
      return function(scope, element) {
        if (!compiledContents) {
          compiledContents = $compile(contents);
        }
        compiledContents(scope, function(clone) {
          element.append(clone);
        });
      };
    }
  };

  return RecursionHelper;
}]);

module.directive("tree", function(RecursionHelper) {
  return {
    restrict: "E",
    scope: {
      family: '='
    },
    template: '<a href="#" ng-attr-class="{{family.children.length != 0 && \'dropdown-toggle\'}}" ng-attr-data-toggle="{{ family.children.length != 0 && \'dropdown\'}}">{{ family.name }}</a>' +
      '<ul class="dropdown-menu" ng-if="family.children.length!=0">' +
      '<li ng-attr-class="{{family.children.length != 0 && \'menu-item dropdown dropdown-submenu\'|| \'menu-item\'}}" ng-repeat="child in family.children">' +
      '<tree family="child"></tree>' +
      '</li>' +
      '</ul>',

    compile: function(element) {
      return RecursionHelper.compile(element);
    }
  };
});