Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS style three-level drop-down menu</title><style>@charset "utf-8";body{margin:0px; padding:0px; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#FFF; background:url(/jscss/demoimg/201303/tittlePicture.png) no-repeat;}body a{color:#FFF;}.box{margin:240px auto; padding:0px; width:1000px;}.box ul{margin:0px; padding:0px; list-style:none;}.box ul li{margin:0px 2px 0px 0px; padding:0px; width:120px; height:35px; display:inline; float:left; background:url(/jscss/demoimg/201303/zk.png) no-repeat 0 0; border-radius:4px; box-shadow:#000 0px 0px 1px;}.box ul li:hover ul{display:block;}.box ul li a{text-align:center; width:121px; height:37px; line-height:35px; display:block; text-decoration:none;}.box ul li ul{display:none;}.box ul li ul li{margin:0px 0px 2px 0px; padding:0px; background:url(/jscss/demoimg/201303/zkTwo.png) no-repeat;}.box ul li ul li:hover{background:#666;}.box ul li ul li:hover ul{visibility:visible;}.box ul li ul li ul{visibility:hidden; position:relative; top:-37px; left:121px;}.box ul li ul li ul li{background:#000;}</style></head><body><div class="box"><ul> <li>Source code enthusiasts<ul> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Technical articles<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Source code download<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> </ul> </li> <li>AD contact<ul> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> </ul> </li> <li>Latest update<ul> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> </ul> </li> <li>Source code download<ul> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> </ul> </li> <li>Programming skills<ul> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> </ul> </li> <li>Programming controls<ul> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>E-books<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> </ul> </li> <li>Webpage special effects<ul> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> <li>Two-level menu<ul> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> <li>Three-level menu</li> </ul> </li> </ul> </li> </ul></div></body></html></td> </tr></table>
Tip: you can modify some code before running
