<!DOCTYPE HTML><HTML><Head> <title></title> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <Linkhref= "Style/style.css"rel= "stylesheet"type= "Text/css"/> <Scripttype= "Text/javascript"src= "Js.js"></Script> <styletype= "Text/css"> </style> <Scripttype= "Text/javascript"> </Script></Head><Body><Div> <ul> <Li><ahref="#">Tom</a> <ulclass= "Liul"> <Li><ahref="#">Zhang 31</a></Li> <Li><ahref="#">Zhang 32</a></Li> <Li><ahref="#">Zhang 33</a></Li> <Li><ahref="#">Zhang three or four</a></Li> </ul> </Li> <Li><ahref="#">John doe</a> <ulclass= "Liul"> <Li><ahref="#">Li Shiyi</a></Li> <Li><ahref="#">Lee 42</a></Li> <Li><ahref="#">Li Shisan</a></Li> <Li><ahref="#">Lee 44</a></Li> </ul> </Li> <Li><ahref="#">Harry</a> <ulclass= "Liul"> <Li><ahref="#">Wuyi Wang</a></Li> <Li><ahref="#">Wang 52</a></Li> <Li><ahref="#">Wang 53</a></Li> <Li><ahref="#">Wang May Fourth</a></Li> </ul> </Li> <Li><ahref="#">Zhao Liu</a> <ulclass= "Liul"> <Li><ahref="#">Zhao Children's Day</a></Li> <Li><ahref="#">Zhao 62</a></Li> <Li><ahref="#">Zhao 63</a></Li> <Li><ahref="#">Zhao 64</a></Li> </ul> </Li> </ul></Div></Body></HTML>
===============================
CSS Required Pictures
===============================
ul{List-style-type:None;}ul Li ul Li{float:None;}UL Li A, UL Li ul li a{text-decoration:None;Display:Block;width:100px;Height:40px;Line-height:40px;Color:#000;Font-weight:Bold;text-indent:40px;background:URL (".. /images/button.jpg ") No-repeat left center;}ul Li A:hover{background:URL (".. /images/button.jpg ") No-repeat Right Center;Color:#FFF;}ul Li. Liul{Display:None;}ul li:hover > UL{Display:Block;/*Display:inline;*/}ul Li{/*Float:left;*/}UL Li ul{/*padding:0;*/}