< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 3 </ title >
< style >
body {} { font-family : "宋体" ; font-size : 14.7px ; margin : 1% 20% ; padding : 12px 30px ; }
div {} { cursor : hand ; padding-left : 12px ; }
li {} { width : 70px ; border-left : 1px solid black ; padding : 0 ; font-size : 12px ; margin : 0 6px ; list-style-type : none ; border-bottom : 1px dashed red ; }
#main {} { margin : 0 }
</ style >

< script  language ="javascript"  type ="text/javascript" >
<!--
function  menu(aa,bb) {

if (aa.style.display == " none " ) {
d01.style.display = " none " ;
d11.style.display = " none " ;
d21.style.display = " none " ;
d31.style.display = " none " ;
aa.style.display = "" ;
d00.src = " http://www.1studio.net/html/example/0054/close.gif " ;
d10.src = " http://www.1studio.net/html/example/0054/close.gif " ;
d20.src = " http://www.1studio.net/html/example/0054/close.gif " ;
d30.src = " http://www.1studio.net/html/example/0054/close.gif " ;
bb.src = " http://www.1studio.net/html/example/0054/open.gif " ;
}
else
{
aa.style.display = " none " ;
bb.src = " http://www.1studio.net/html/example/0054/close.gif " ;
}
}
// -->
</ script >
</ head >
< body >
< div  id ="d0"  onclick ="menu(d01,d00)" >< img  name ="d00"  src ="http://www.1studio.net/html/example/0054/close.gif" />  链接0 </ div >  
< div  id ="d01"  style ="display:none" >   
< li >< a  href ="#" > - 子目录1 </ a ></ li >   
< li >< a  href ="#" > - 子目录2 </ a ></ li >
< li >< a  href ="#" > - 子目录3 </ a ></ li >   
< li >< a  href ="#" > - 子目录4 </ a ></ li >   
</ div >
< div  id ="d1"  onclick ="menu(d11,d10)" >< img  name ="d10" src ="http://www.1studio.net/html/example/0054/close.gif" />  链接一 </ div >
< div  id ="d11"  style ="display:none" >
< li >< a  href ="#" > - 子目录1 </ a ></ li >   
< li >< a  href ="#" > - 子目录2 </ a ></ li >
< li >< a  href ="#" > - 子目录3 </ a ></ li >   
< li >< a  href ="#" > - 子目录4 </ a ></ li >  
</ div >
< div  id ="d2"  onclick ="menu(d21,d20)" >
< img  name ="d20"  src ="http://www.1studio.net/html/example/0054/close.gif" />  链接二 </ div >
< div  id ="d21"  style ="display:none" >
< li >< a  href ="#" > - 子目录1 </ a ></ li >   
< li >< a  href ="#" > - 子目录2 </ a ></ li >
< li >< a  href ="#" > - 子目录3 </ a ></ li >   
< li >< a  href ="#" > - 子目录4 </ a ></ li >   </ div >
< div  id ="d3"  onclick ="menu(d31,d30)" >
< img  name ="d30"  src ="http://www.1studio.net/html/example/0054/close.gif" />  链接三 </ div >
< div  id ="d31"  style ="display:none" >
< li >< a  href ="#" > - 子目录1 </ a ></ li >   
< li >< a  href ="#" > - 子目录2 </ a ></ li >
< li >< a  href ="#" > - 子目录3 </ a ></ li >   
< li >< a  href ="#" > - 子目录4 </ a ></ li >  
</ div >  
</ body >