Javascript JSON数据多重下拉菜单

我尝试创建可配置JSON的悬停多个下拉式上下文菜单

$（函数（）{
风险值数据={
菜单：[{
名称：“乌克兰”，
链接：“0”，
sub:null
}, {
姓名：'克罗地亚'，
链接：“1”，
sub:null
}, {
名称：“丹麦”，
连结:"2",，
sub:null
}, {
名称：‘加拿大’，
连结:"3",，
sub:null
}, {
姓名：'哥伦比亚'，
连结:"4",，
sub:null
}, {
名称:"日本",，
连结:"5",，
sub:null
}, {
姓名：“威尔士”，
链接:"6",，
sub:null
}, {
名称：“英格兰”，
链接：“7”，
分：[{
名称：“阿森纳”，
链接：“0-0”，
sub:null
}, {
名字：“利物浦”，
链接：“0-1”，
sub:null
}, {
名称：“曼联”，
链接：“0-2”，
sub:null
}]
}, {
名称：“西班牙”，
链接:"8",，
分：[{
名称：“巴塞罗那”，
链接：“2-0”，
sub:null
}, {
名称：“皇家马德里”，
链接：“2-1”，
sub:null
}]
}, {
名称：“德国”，
链接:"9",，
分：[{
名称：“拜仁慕尼黑”，
链接：“3-1”，
sub:null
}, {
名称：“多特蒙德博鲁西亚”，
链接：“3-2”，
sub:null
}]
}]
};
var getMenuItem=函数（itemData）{
变量项=$（“
”）
.附加(
$("", {
href:'#'+itemData.link，
html:itemData.name
}));
if（itemData.sub）{
变量子列表=$（“
”）；
$.each（itemData.sub，函数（）{
append（getMenuItem（this））；
});
附加项（子列表）；
}
退货项目；
};
var$menu=$（“#menu”）；
$.each（data.menu，function（）{
$menu.append(
getMenuItem（此）
);
});
$menu.menu（）；
});

.ui小部件内容{左填充：20px；}
.ui菜单{
宽度：150px；
高度：250px；
溢出x：隐藏；
方向：rtl；
左侧填充：20px；
}
.ui菜单{
溢出y：隐藏；
}
.ui菜单：悬停{
溢出y：滚动；
}
.ui菜单.ui菜单项{
浮动：左；
显示：块；
}
.ui小部件.ui小部件{
位置：固定；
溢出：隐藏；
方向：ltr；
左侧填充：0；
}
.ui菜单.ui菜单{
位置：固定；
}
：-webkit滚动条{
宽度：13px；
}
身体{
溢出y：隐藏；
右侧填充：12px；
}
身体：悬停{
溢出y：滚动；
右边填充：0px；
}
/*跟踪*/
：-webkit滚动条轨迹{
背景：灰色；
}
/*处理*/
：-webkit滚动条拇指{
背景：灰色；
}
：-webkit滚动条按钮{
背景#3C3838；
}

您可以在页面上添加一个显示/隐藏菜单的范围

  $('#showmenu').on(' mouseover', function() {
    $menu.show().focus();
  });
  $menu.on('mouseleave',function(){
    $(this).hide();
  });

请在此处查看此操作：