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

我看到

是這不是你想要的？