1、将下面的代码复制到 <head> 内 <style>
<!--
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--
/**
* Based on Folding Menu Tree
* Dynamic Drive (www.dynamicdrive.com)
* For full source code, installation instructions,
* 100's more DHTML scripts, and Terms Of
* Use, visit dynamicdrive.com
*
* Updated to support arbitrarily nested lists
* by Mark Quinn (@robocast.com) November 2nd 1998
*/var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"function change(){
if(!document.all)
return
if (event.srcElement.id=="foldheader") {
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none") {
nested.style.display=''
event.srcElement.style.listStyleImage="url(open.gif)"
}
else {
nested.style.display="none"
event.srcElement.style.listStyleImage="url(fold.gif)"
}
}
}document.onclick=change//-->
</script>2.将下面的代码复制到 <body> 内并可修改连接为你的连接 <ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none">
<li><a href="../../../www.cnn.com/index.html">CNN</a></li>
<li><a href="../../../www.abcnews.com/index.html">ABC News</a></li>
<li><a href="../../../www.vancouversun.com/index.html">Vancouver Sun</a></li>
</ul> <li id="foldheader">Games</li>
<ul id="foldinglist" style="display:none">
<li><a href="../../../www.gamespot.com/index.html">GameSpot</a></li>
<li><a href="../../../www.happypuppy.com/index.html">Happy Puppy</a></li>
<li><a href="../../../www.gamecenter.com/index.html">Game Center</a></li>
</ul> <li id="foldheader">Software</li>
<ul id="foldinglist" style="display:none">
<li><a href="../../../www.download.com/index.html">outer 1</a></li>
<li><a href="../../../www.hotfiles.com/index.html">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none">
<li><a href="../../../www.windows95.com/index.html">nested 1</a></li>
<li><a href="../../../www.shareware.com/index.html">nested 2</a></li>
</ul>
<li><a href="../../../www.windows95.com/index.html">outer 3</a></li>
<li><a href="../../../www.shareware.com/index.html">outer 4</a></li>
</ul>
</ul>
<!--
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--
/**
* Based on Folding Menu Tree
* Dynamic Drive (www.dynamicdrive.com)
* For full source code, installation instructions,
* 100's more DHTML scripts, and Terms Of
* Use, visit dynamicdrive.com
*
* Updated to support arbitrarily nested lists
* by Mark Quinn (@robocast.com) November 2nd 1998
*/var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"function change(){
if(!document.all)
return
if (event.srcElement.id=="foldheader") {
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none") {
nested.style.display=''
event.srcElement.style.listStyleImage="url(open.gif)"
}
else {
nested.style.display="none"
event.srcElement.style.listStyleImage="url(fold.gif)"
}
}
}document.onclick=change//-->
</script>2.将下面的代码复制到 <body> 内并可修改连接为你的连接 <ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none">
<li><a href="../../../www.cnn.com/index.html">CNN</a></li>
<li><a href="../../../www.abcnews.com/index.html">ABC News</a></li>
<li><a href="../../../www.vancouversun.com/index.html">Vancouver Sun</a></li>
</ul> <li id="foldheader">Games</li>
<ul id="foldinglist" style="display:none">
<li><a href="../../../www.gamespot.com/index.html">GameSpot</a></li>
<li><a href="../../../www.happypuppy.com/index.html">Happy Puppy</a></li>
<li><a href="../../../www.gamecenter.com/index.html">Game Center</a></li>
</ul> <li id="foldheader">Software</li>
<ul id="foldinglist" style="display:none">
<li><a href="../../../www.download.com/index.html">outer 1</a></li>
<li><a href="../../../www.hotfiles.com/index.html">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none">
<li><a href="../../../www.windows95.com/index.html">nested 1</a></li>
<li><a href="../../../www.shareware.com/index.html">nested 2</a></li>
</ul>
<li><a href="../../../www.windows95.com/index.html">outer 3</a></li>
<li><a href="../../../www.shareware.com/index.html">outer 4</a></li>
</ul>
</ul>
<tr><td onmouseover="javascript:child.style.display='block';" onmouseout="javascript:child.style.display='none'">天津</td>
</tr>
<tr><td><table id="child" onmouseover="javascript:child.style.display='block';"onmouseout="javascript:child.style.display='none'" >
<tr><td>上海</td></tr>
<tr><td>北京</td></tr>
</table>
</td></tr></table>