DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Documenttitle><style>.container{position: relative;}.nav{width: fit-content;padding: 5px 10px;border-radius: 5px;background-color: orange;color: white;cursor: pointer;}.nav:hover{background-color: orangered;}.nav:hover ~ .content{height:var(--height--);}.content{position: absolute;top: 40px;width: 200px;height: 0;overflow: hidden;background-color: skyblue;transition: all 0.5s;border-radius: 5px;}style>head><body><divclass="container"><divclass="nav">下拉div><divclass="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto praesentium sunt ea alias at
cumque nostrum impedit eveniet, excepturi aliquid nesciunt ut. Nobis placeat excepturi
sapiente, dolorem quia perferendis aspernatur? Veniam asperiores illo qui optio rem
div>div><script>const el = document.querySelector('.content'),
height = el.scrollHeight;
el.style.setProperty('--height--', height +'px');script>body>html>