Javascript 使用document.getElementById（“nav01”）.innerHTML时的子菜单

这是我用来创建菜单的脚本代码。我的问题是我不能让测试菜单像子菜单一样工作。如果它不在那里，菜单就会正常工作

这是完整的脚本代码

我添加了CSS代码，因为这可能有助于我尝试实现的外观

document.getElementById("nav01").innerHTML = 
    "<ul id='menu'>" +
    "<li><a href='index.html'>Home</a></li>" +
    "<li><a href='calendar.html'>Calendar</a></li>" +
    "<li><a href='photos.html'>Photos</a>
    <ul><li><a href='Test.html'>test</a></li></ul></li>"+
    "<li><a href='events.html'>Events</a></li>"+
"</ul>";



/*Navagation CSS*/
ul#menu {
  padding: 0;
  margin-bottom: 11px;
}

ul#menu li {
  display: inline;
  margin-right: 3px;
}

ul#menu li a {
  background-color: #CCC;
  padding: 10px 20px;
  text-decoration: none;
  color: #696969;
  border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
color: white;
background-color: black;
}

ul#menu li a:active{
  background-color:blue;
}

内部必须是外部的一部分

也指

您希望它如何显示

当我到达

我明白了

---

这不是你想要的吗？

发布完整的代码。。这对理解实际问题没有帮助..这不起作用，我的菜单中的代码将不会显示。请查看编辑并解释我在使用的CSS中添加了什么所需的输出isI。这将为您提供我尝试使用的格式必须与您的css有关，从逻辑上讲，html似乎很好。尝试播放ul的显示和填充参数

document.getElementById("nav01").innerHTML = 
"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='calendar.html'>Calendar</a></li>" +
"<li><a href='photos.html'>Photos</a>
"<ul><li><a href='Test.html'>test</a></li></ul></li>"+
"<li><a href='events.html'>Events</a></li>"+
"</ul>"