``` CSS代码: ```css nav ul { list-style: none; padding: 0; margin: 0; } nav ul li { display: inline-block; position: relative; } nav ul li a { display: block; padding: 10px 20px; background: #333; color: #fff; text-decoration: none; } nav ul li a:hover { background: #999; } nav ul li ul { display: none; position: absolute; top: 40px; left: 0; width: 200px; } nav ul li:hover ul { display: block; } nav ul li ul li { width: 100%; display: block; } ``` JavaScript代码(script.js): ```javascript $(document).ready(function() { $('nav ul li').hover( function() { // 显示子菜单 $(this).find('ul').slideDown(); }, function() { // 隐藏子菜单 $(this).find('ul').slideUp(); } ); }); ``` 这段代码定义了一个带有动画效果的二级导航菜单。当鼠标悬停在父菜单上时,子菜单会以向下滑动的动画效果显示出来;当鼠标离开父菜单时,子菜单会以向上滑动的动画效果隐藏起来。 你可以将以上代码复制到一个HTML文件中,并将jQuery库的链代替换为你自己的链接,然后将CSS样式代码保存为一个名为style.css的文件,并将JavaScript代码保存为一个名为script.js的文件。最后,你就能够在浏览器中打开该HTML文件来查看效果了。