.third-level-menu
{ position: absolute; top: 0; right: -150px; width: 150px; list-style: none; padding: 0; margin: 0; display: none;}.third-level-menu > li{ height: 30px; background: #999999;}.third-level-menu > li:hover { background: #CCCCCC; }.second-level-menu{ position: absolute; top: 30px; left: 0; width: 150px; list-style: none; padding: 0; margin: 0; display: none;}.second-level-menu > li{ position: relative; height: 30px; background: #999999;}.second-level-menu > li:hover { background: #CCCCCC; }.top-level-menu{ list-style: none; padding: 0; margin: 0;}.top-level-menu > li{ position: relative; float: left; height: 30px; width: 150px; background: #999999;}.top-level-menu > li:hover { background: #CCCCCC; }.top-level-menu li:hover > ul{ display: inline;}.top-level-menu a { font: bold 14px Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; padding: 0 0 0 10px; display: block; line-height: 30px;}.top-level-menu a:hover { color: #000000; }<ul > <li><a href="#">about</a></li> <li><a href="#">Services</a></li> <li> <a href="#">Offices</a> <ul > <li><a href="#">Chicago</a></li> <li><a href="#">Los Angeles</a></li> <li> <a href="#">New York</a> <ul > <li><a href="#">Information</a></li> <li><a href="#">Book a Meeting</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Jobs</a></li> </ul> </li> <li><a href="#">Seattle</a></li> </ul> </li> <li><a href="#">Contact</a></li></ul>我还整理了一个现场演示，可在此处使用
