<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .menu { width: 200px; height: auto; margin: 100px auto; } .item { width: 100%; height: auto; } .item > h3 { height: 40px; line-height: 40px; background-color: #7dffe7; color: orange; border-bottom: 2px solid #ccc; padding-left: 10px; } .item > .itemBox { width: 100%; height: 0px; overflow: hidden; /* 添加过渡的效果:过渡效果只能产生从某个值到另一个具体值的过渡 */ transition-property: height; /* 一定要设置过渡效果的耗时 */ transition-duration: 1s; } /* 为 item 添加hover伪类 */ .item:hover > .itemBox { height: 100px; } .item > .itemBox > ul { list-style: none; background-color: #aeffb6; } </style> </head> <body> <div class="menu"> <div class="item"> <h3>市内新闻</h3> <div class="itemBox"> <ul> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> </ul> </div> </div> <div class="item"> <h3>省内新闻</h3> <div class="itemBox"> <ul> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> </ul> </div> </div> <div class="item"> <h3>国内新闻</h3> <div class="itemBox"> <ul> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> </ul> </div> </div> <div class="item"> <h3>国际新闻</h3> <div class="itemBox"> <ul> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> <li>深圳猪肉遭哄抢</li> </ul> </div> </div> </div> </body> </html>