Transferred from: http://www.cnblogs.com/clc2008/archive/2011/10/25/2223254.html
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <title></title> <Scripttype= "Text/javascript"src= "Js/jquery-1.6.4.min.js"></Script> <styletype= "Text/css">#myul{width:504px;}#myul Li{List-style:None;Border:1px solid #96C2F1;padding:1px;}#myul Li Span{List-style:None;background:#B2D3F5;width:480px;Height:20px;Display:Block;Padding-left:20px; }#myul Li Span.hand{cursor:Pointer;background:#B2D3F5 URL (img/right.gif) no-repeat 5px Center;}#myul Li Span.current{background:#b2d300 URL (img/down.gif) no-repeat 5px Center; }#myul Li Div{background:#EFF7FF;width:490px;padding:0px 5px 5px 5px; } </style> <Scripttype= "Text/javascript"> $(function () { $("#myul Li Div"). Hide (); $("#myul Li Span"). addclass ("Hand"); $("#myul Li Span"). Click (function () { $( This). Toggleclass (" Current"); $( This). Parent (). siblings (). Find ("span"). Removeclass (" Current"); $( This). Parent (). Find ("Div.hid"). Slidetoggle ("Fast"); $( This). Parent (). siblings (). Find ("Div"). Slideup ("Fast"); }); }) </Script></Head><Body><ulID= "Myul"><Li><span>First level Menu</span> <Divclass= "HID"> <P>Weapons Oh Satan Law takes place Satan law to fight Satan<BR/>Asdfasfdasfd</P> <P>Weapons Oh Satan Law takes place Satan law to fight Satan<BR/>Asdfasfdasfd</P> </Div></Li><Li><span>Second Level menu</span> <Divclass= "HID">Weapons Oh Satan Law takes place Satan law</Div> </Li><Li><span>Third Level Menu</span><Divclass= "HID"> <P>Weapons Oh Satan Law takes place Satan law to play Satan law ASDFASFDASFD</P> <P>Weapons Oh Satan Law takes place Satan law to fight Satan<BR/>Asdfasfdasfd</P> <P>Weapons Oh Satan Law takes place Satan law to play Satan law ASDFASFDASFD</P> <P>Weapons Oh Satan Law takes place Satan law to fight Satan<BR/>Asdfasfdasfd</P> </Div></Li></ul></Body></HTML>