纯CSS多级下拉菜单

.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>

我还整理了一个现场演示，可在此处使用