纯CSS写的下拉菜单
效果图，如上图所示 <!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> <title></title> <style type="text/css"> #menu { margin-left:auto; margin-right:auto; width:1000px; } ul { margin: 0px; padding: 0px; height:30px; } ul li { float: left; display: inline; font: 0.9em Arial, Helvetica, sans-serif; height: 30px; width: 100px; list-style: none; } ul li a { color: #F4F4F4; text-decoration: none; text-align:center; 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> </head> <body> <div id="menu"> <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> </div> </body> </html>