直接来看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ margin:0; padding:0;} ul,li{list-style: none;} .box{ width:600px; height:40px; margin:0 auto;} .box ul{ list-style:none;} .box ul li{ float:left; line-height:40px; text-align:center; position:relative;} .box ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;} .box ul li a:hover{ color:#FFF; background:#333} .box ul li ul{ position:absolute; display:none;} .box ul li ul li{ float:none; line-height:30px; text-align:left;} .box ul li ul li a{ width:100%;} .box ul li ul li a:hover{ background-color:#06f;} .box ul li:hover ul{ display:block} </style> <body> <div class="box"> <ul> <li> <a href="javascript:void(0)">一级菜单</a> <ul class="ul"> <li><a href="javascript:void(0)">二级菜单1</a></li> <li><a href="javascript:void(0)">二级菜单2</a></li> <li><a href="javascript:void(0)">二级菜单3</a></li> </ul> </li> <li> <a href="javascript:void(0)">一级菜单</a> <ul> <li><a href="javascript:void(0)">二级菜单1</a></li> <li><a href="javascript:void(0)">二级菜单2</a></li> <li><a href="javascript:void(0)">二级菜单3</a></li> </ul> </li> <li> <a href="javascript:void(0)">一级菜单</a> <ul> <li><a href="javascript:void(0)">二级菜单1</a></li> <li><a href="javascript:void(0)">二级菜单2</a></li> <li><a href="javascript:void(0)">二级菜单3</a></li> </ul> </li> </ul> </div> </body> </html>
效果图：
就是这么的简单粗暴！哈哈哈