<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <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>