<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折叠导航栏</title> <style type="text/css"> *{ margin: 0; padding: 0; } .div1{ width: 300px; margin: 10px; /*float: left;*/ } h3{ background-color: rgba(180,80,30,0.8); padding: 5px; text-align: center; border-radius: 30px; } a{ text-decoration: none; } h3+div{ height: 0; overflow: hidden;/*溢出的部分隐藏*/ transition: all 1s ease;/*设置动画效果*/ } .div1:hover h3+div{ height: 120px; overflow: auto;/*鼠标滑动后显示*/ } </style> </head> <body> <div class="div1"> <h3><a href="">html5</a></h3> <div><img src="../image/img3.jpg"></div> </div> <div class="div1"> <h3><a href="">css3</a></h3> <div><img src="../image/img3.jpg"></div> </div> <div class="div1"> <h3><a href="">javascript</a></h3> <div><img src="../image/img3.jpg"></div> </div> </body> </html>