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: 150px;
}

JavaScript

var JSON = {
    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: 'Spain', link: '2', sub: [
            {name: 'Barcelona',link: '2-0', sub: null},
            {name: 'Real Madrid',link: '2-1', sub: null}
        ]},        
        {name: 'Germany', link: '3',sub: [
            {name: 'Bayern Munich',link: '3-1', sub: null},
            {name: 'Borrusia Dortmund',link: '3-2', sub: null}
            ]}
    ]
}

$(function () {     
    
    function parseMenu(ul, menu) {
	for (var i=0;i<menu.length;i++) {
		var li=$(ul).append('<li><a href="'+menu[i].link+'">'+menu[i].name+'</a></li>');
		if (menu[i].sub!=null) {
			var subul=$('<ul id="submenu'+menu[i].link+'"></ul>');
			$(li).append(subul);
			parseMenu($(subul), menu[i].sub);
		}
	}
}

var menu=$('#menu');
parseMenu(menu, JSON.menu);

 
 });