JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<ul id="menu">
</ul>

CSS

.ui-menu {
  width: 250px;
}

JavaScript

$(function() {

  var data = {
    menu: [{
      name: 'Croatia',
      link: '0',
      sub: null
    }, {
      name: 'England',
      link: '1',
      sub: [{
        name: 'Arsenal',
        link: '0-0',
        sub: null
      }, {
        name: 'Liverpool',
        link: '0-1',
        sub: null
      }, {
        name: 'Manchester United',
        link: '0-2',
        sub: null
      }]
    }, {
      name: 'Germany',
      link: '3',
      sub: [{
        name: 'Bayern Munich',
        link: '3-1',
        sub: null
      }, {
        name: 'Borrusia Dortmund',
        link: '3-2',
        sub: null
      }]
    }]
  };
  var getMenuItem = function(itemData) {
    var item = $("<li>")
      .append(
        $("<a>", {
          href: '#' + itemData.link,
          html: itemData.name
        }));
    if (itemData.sub) {
      var subList = $("<ul>");
      $.each(itemData.sub, function() {
        subList.append(getMenuItem(this));
      });
      item.append(subList);
    }
    return item;
  };

  var $menu = $("#menu");
  $.each(data.menu, function() {
    $menu.append(
      getMenuItem(this)
    );
  });
  $menu.menu();
});