网页导航栏的下拉效果，通过div框的显示和隐藏实现。
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0px; margin: 0px; } .nav{ width: 600px; height: 35px; border: 1px solid black; } .nav-title{ width: 100px;
/*导航栏显示高度*/ max-height: 35px; text-align: center; line-height: 35px; float: left; background-color: greenyellow; font-size: 20px; /*超出部分隐藏*/ overflow: hidden; transition: 1s; } /*鼠标指示效果*/ .nav-title:hover{ cursor: pointer;
/*显示下拉高度*/ max-height: 500px; } .nav-title ul{ list-style: none; } .nav-title li{ width: 100px; height: 35px; background-color: burlywood; } .nav-title li{ cursor: pointer; } </style> </head> <body> <div class="nav"> <div class="nav-title">1 <ul> <li>i</li> <li>a</li> <li>s</li> <li>f</li> </ul> </div> <div class="nav-title">2</div> <div class="nav-title">3</div> <div class="nav-title">4</div> <div class="nav-title">5</div> </div> </div> </body> </html>