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>CSS前段学习之加个下拉列表
原文地址：http://www.cnblogs.com/shandayuan/p/8046553.html