要实现这样的效果主要有两点。第一，当鼠标经过主导航栏里面的内容就会被放大，鼠标离开后就会恢复原来的样子；第二，当鼠标经过主导航时对应的副导航的内容就会呈现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(176, 180, 184);
        }

        #content {
            display: flex;
            justify-content: space-evenly;
        }
        
        a {
            text-decoration: none;
            color: white;
        }
        
        ul {
            list-style: none;
        }
        
        .nav {
            text-align: center;
            overflow: hidden;
        }
        
        .nav>li {
            float: left;
        }
        
        .nav>li>a {
            border: none;
            display: block;
            width: 130px;
            height: 40px;
            line-height: 40px;
            background-color: rgb(71, 73, 75);
            font-size: 20px;
        }
        
        .nav ul {
            background-color: rgb(93, 95, 98);
            line-height: 40px;
            display: none;
        }
        
        .nav ul>li:hover {
            background-color: rgb(117, 120, 123);
        }
    </style>
</head>

<body>
    <div id="content">
        <ul class="nav">
            <li>
                <a href="#">林俊杰</a>
                <ul>
                    <li><a href="#">《浪漫血液》</a></li>
                    <li><a href="#">《交换余生》</a></li>
                    <li><a href="#">《裹着心的光》</a></li>
                    <li><a href="#">《愿与愁》</a></li>
                </ul>
            </li>
            <li>
                <a href="#">张杰</a>
                <ul>
                    <li><a href="#">《天下》</a></li>
                    <li><a href="#">《少年中国说》</a></li>
                    <li><a href="#">《这就是爱》</a></li>
                    <li><a href="#">《逆战》</a></li>
                </ul>
            </li>
            <li>
                <a href="#">周杰伦</a>
                <ul>
                    <li><a href="#">《稻香》</a></li>
                    <li><a href="#">《七里香》</a></li>
                    <li><a href="#">《花海》</a></li>
                    <li><a href="#">《搁浅》</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        // 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children;
        // 循环注册事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[0].style.fontSize = '25px'; //a是第一个孩子
                this.children[1].style.display = 'block'; //ul是第二个孩子
            }
            lis[i].onmouseleave = function() {
                this.children[0].style.fontSize = '20px';
                this.children[0].style.lineHeight = '40px';
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

</html>

# javascript # css # 前端
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

avatar AI Agent技术社区
cover

2025年8月SCI-炭黑四角蜂优化算法 Tetragonula carbonaria Optimization Algorithm-附Matlab免费代码

avatar AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..

avatar AI Agent技术社区