<script type="text/javascript">

function switchMenu(curr_id, total_num)

{

for(var i=0; i<total_num; i++)

{

//二級菜單

var el = document.getElementById('menu_sub_'+i);

if(!el) return;

//一級菜單前面的圖片

var img = document.getElementById('menu_master_'+i);

if(i == curr_id)

{

el.style.display = "block";

img.src = "/wp-content/uploads/examples/switch-menu/open.gif";

}

else

{

el.style.display = "none";

img.src = "/wp-content/uploads/examples/switch-menu/close.gif";

}

}

}

</script>

<style type="text/css">

<!--

#warp {

width:200px;

margin:20px auto;

height:300px;

}

.menu_master {

border:1px solid #ccc;

padding:5px 10px;

margin-bottom:2px;

cursor:pointer;

font-weight:bold;

color:#666;

}

.menu_master img { vertical-align:middle; }

.sub_menu { display:none; }

.sub_menu ul, .sub_menu ul li {

margin:0;

padding:0;

list-style:none;

}

.sub_menu ul li a {

margin:0 0 3px 10px;

padding:3px 0 2px 25px;

background:url(/wp-content/uploads/examples/switch-menu/arrow_001.gif) no-repeat 5px center;

display:block;

height:18px;

border-bottom:1px solid #eee;

color:#666;

text-decoration:none;

}

-->

</style>

<div id="warp">

<div class="menu_master" onclick="javascript:switchMenu(0, 4);">

<img  src="/wp-content/uploads/examples/switch-menu/close.gif" alt="close" id="menu_master_0" /> PHP/MySQL

</div>

<div id="menu_sub_0" class="sub_menu">

<ul>

<li><a href="/pub/html/php_mysql/tutorial/" title="PHP/MySQL教程">PHP/MySQL教程</a></li>

<li><a href="/pub/html/php_mysql/tip/" title="PHP/MySQL小技巧">PHP/MySQL小技巧</a></li>

<li><a href="/pub/html/php_mysql/problem/" title="PHP/MySQL常見問題">PHP/MySQL常見問題</a></li>

</ul>

</div>

<div class="menu_master" onclick="javascript:switchMenu(1, 4);">

<img  src="/wp-content/uploads/examples/switch-menu/close.gif" alt="close" id="menu_master_1" /> (X)HTML/CSS

</div>

<div id="menu_sub_1" class="sub_menu">

<ul>

<li><a href="/pub/html/xhtml_css/tutorial/" title="(X)HTML/CSS教程">(X)HTML/CSS教程</a></li>

<li><a href="/pub/html/xhtml_css/tip/" title="(X)HTML/CSS小技巧">(X)HTML/CSS小技巧</a></li>

</ul>

</div>

<div class="menu_master" onclick="javascript:switchMenu(2, 4);">

<img  src="/wp-content/uploads/examples/switch-menu/close.gif" alt="close" id="menu_master_2" /> Ajax

</div>

<div id="menu_sub_2" class="sub_menu">

<ul>

<li><a href="/pub/html/ajax/tutorial/" title="Ajax教程">Ajax教程</a></li>

<li><a href="/pub/html/ajax/tip/" title="Ajax小技巧">Ajax小技巧</a></li>

</ul>

</div>

<div class="menu_master" onclick="javascript:switchMenu(3, 4);">

<img  src="/wp-content/uploads/examples/switch-menu/close.gif" alt="close" id="menu_master_3" /> Javascript

</div>

<div id="menu_sub_3" class="sub_menu">

<ul>

<li><a href="/pub/html/javascript/tutorial/" title="Javascript教程">Javascript教程</a></li>

<li><a href="/pub/html/javascript/tip/" title="Javascript小技巧">Javascript小技巧</a></li>

</ul>

</div>

</div></td>

 </tr>

</table>