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

Question

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代码，因为这可能有助于我想要实现的目标

Answer 1

试试这个

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>"

内部<ul>必须是外部<li>

<ul>的一部分

也可以参考

http://www.w3.org/wiki/HTML_lists#Nesting_lists

你想怎么出现？

当我到达

时

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

我看到了

这不是你想要的吗？