1216.
加个下拉列表：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; font-family: "微软雅黑"; } .top_container{ width: 100%; height: 40px; background: #000000; } .top_nav{ width: 600px; height: 40px; margin: 0px auto; } .top_nav_lv1{ width: 150px; max-height: 40px; background: #000000; float: left; text-align: center; line-height: 40px; overflow: hidden; color: #FFFFFF; } .top_nav_lv1:hover{ /*最大高度*/ max-height: 400px; /*过渡效果*/ transition: 1s; /*鼠标小手*/ cursor: pointer; } .top_nav_lv1 li{ color: #FFFFFF; } .top_nav_lv1 li:hover{ background-color: blue; } .top_nav_lv1 ul{ /*opacity: 0.5;*/ } .top_container,.top_nav_lv1{ border-radius: 10px; } </style> <body> <div class="top_container"> <div class="top_nav"> <div class="top_nav_lv1">导航1 <ul> <li>导航A</li> <li>导航B</li> <li>导航C</li> <li>导航D</li> </ul> </div> <div class="top_nav_lv1">导航2 <ul> <li>导航A</li> <li>导航B</li> <li>导航C</li> <li>导航D</li> <li>导航A</li> <li>导航B</li> <li>导航C</li> <li>导航D</li> </ul> </div> <div class="top_nav_lv1">导航3 <ul> <li>导航A</li> <li>导航B</li> <li>导航C</li> </ul> </div> <div class="top_nav_lv1">导航4 <ul> <li>导航A</li> <li>导航B</li> </ul> </div> </div> </div> </body> </html>
