<style> ul { margin: 0px; padding: 0px; } ul li { float: left; display: inline; font: 0.9em Arial, Helvetica, sans-serif; height: 30px; width: 100px; list-style: none; } ul li a { color: #FFF; text-decoration: none; line-height: 29px; width: 91px; margin: 0px; padding: 0px 0px 0px 8px; display: block; border-right: solid 1px #ccc; border-bottom:solid 1px #ccc; background: #808080; } ul li ul li { height:25px; } ul li ul li a { background: #666; line-height:24px; } ul li a:hover { background: #666; } ul li ul { visibility: hidden; } ul li:hover ul { visibility: visible; } ul li ul li a:hover { background: #333; } </style> <ul> <li><a href="#">菜单一</a></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> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li><a href="#">菜单五</a></li> </ul>
本文转自 你听海是不是在笑 博客园博客,原文链接:
http://www.cnblogs.com/nuaalfm/archive/2012/09/27/2705333.html
,如需转载请自行联系原作者