如何创建具有动态内容的水平滚动菜单

<ul id="menu">
  <li>菜单项 1</li>
  <li>菜单项 2</li>
  <li>菜单项 3</li>
  <li>菜单项 4</li>
  <li>菜单项 5</li>
  <li>菜单项 6</li>
  <li>菜单项 7</li>
  <li>菜单项 8</li>
  <li>菜单项 9</li>
  <li>菜单项 10</li>
</ul>

#menu {
  width: 100%;
  height: 50px;
  overflow-x: auto;
  white-space: nowrap;
}

#menu li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  margin-right: 10px;
}

// 假设通过 AJAX 请求获取到了菜单项的数据
var menuData = [
  { name: "菜单项 1", url: "http://example.com/menu1" },
  { name: "菜单项 2", url: "http://example.com/menu2" },
  // ...
];

var menu = document.getElementById("menu");

menuData.forEach(function(item) {
  var li = document.createElement("li");
  var a = document.createElement("a");
  a.href = item.url;
  a.textContent = item.name;
  li.appendChild(a);
  menu.appendChild(li);
});