代码如下：
<html> <head> <style type="text/css"> .menu{width:130px;border:1px solid #ccc;border-bottom:none;} .menu ul{list-style:none;margin:0px;padding:0px;background:#F4F4F4;} .menu ul li {padding:0px 8px;height:26px;border-bottom:1px solid #ccc;line-height:26px;position:relative;} a {text-decoration:none;color:#333333;} .menu ul li:hover{background:#E6E6E6;} .menu ul li ul{display:none;position:absolute;left:130px;top:-1px;width:130px;border:1px solid #ccc;border-bottom:none;} .menu ul li:hover ul {display:block;} </style> </head> <body> <div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">个人网站</a> <ul> <li><a href="#">中华人民共和国</a></li> <li><a href="#">中国无产阶级</a></li> </ul> </li> <li><a href="#">首页</a> <ul> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul> </li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul> </div> </body> </html>
主要注意几点：
测试结果：
原文：http://www.cnblogs.com/zxiaozhang/p/3976749.html