菜单是开发中经常碰到的，随处可见，掌握菜单多级菜单对以后编程具有很重要的意义，这里我只是做了一个简单的二级菜单，从简单的入手，找出规律后，难的就会变得简单了
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ width: 600px; margin: auto; } .img{ width:510px; height: 450px; margin-left: 40px; background: url(img/bg.jpg); } .first li{ text-align: center; list-style: none; width:125px; height: 30px; background-color: black; border-radius: 5px; margin-right: 3px; color: white; line-height: 30px; } .first>li{ float: left; } .first>li:hover{ background-color: gray; } .first li ul li{ margin-bottom: 1px; opacity: .5; } .first li ul{ margin-left: -40px; display: none; position: absolute; } .first li ul li:hover{ background-color: gray; color: black; } .first>li:hover ul{ display: block; } </style> </head> <body> <ul class="first"> <li> <a>在线留言</a> </li> <li> <a>产品展示</a> <ul> <li>成品大鲵</li> <li>新品鲵苗</li> <li>鲜活幼鲵</li> </ul> </li> <li> <a>养殖技术</a> <ul> <li>烹饪方法</li> <li>防虫技术</li> <li>接种鲵苗</li> </ul> </li> <li> <a>公司摄影</a> <ul> <li>日常摄影</li> <li>活动摄影</li> </ul> </li> </ul> <div class="img"></div> </body> </html>
运行结果：
