第一步，我们首先需要先引入jquery文件
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>第二步，开始把html代码先搭起来
<div class="border"> <div id="labels"> <ul> <!--一--> <li class="labels labels_1" > <p id="labels_1" >搜索</p><!--一级标签--> <div class="tab one"> <p><a href="#" target="_blank">百度</a></p><!--二级标签--> </div> </li> <!--二--> <li class="labels labels_2"> <p id="labels_2" >工作</p><!--一级标签--> <div class="tab two"> <p><a href="#" target="_blank">源码之家</a></p><!--二级标签--> <p><a href="#" target="_blank">PHP中文网</a></p><!--二级标签--> <p><a href="#" target="_blank">W3school</a></p><!--二级标签--> <p><a href="#" target="_blank">DeepL翻译</a></p><!--二级标签--> </div> </li> <!--三--> <li class="labels labels_3"> <p id="labels_3" >学习</p><!--一级标签--> <div class="tab three"> <p><a href="#" target="_blank">oeasy</a></p><!--二级标签--> <p><a href="#" target="_blank">考试酷</a></p><!--二级标签--> <p><a href="#" target="_blank">五分钟学算法</a></p><!--二级标签--> <p><a href="#" target="_blank">让人自学网</a></p><!--二级标签--> <p><a href="#" target="_blank">How2j</a></p><!--二级标签--> </div> </li> <!--四--> <li class="labels labels_4"> <p id="labels_4" >视频</p><!--一级标签--> <div class="tab four"> <p><a href="#" target="_blank">哔哩哔哩</a></p><!--二级标签--> <p ><a href="#" target="_blank">全网vip解析</a></p><!--二级标签--> </div> </li> </ul> </div> </div>效果就是这样的
第三步，来给它添加样式
<style> *{ margin: 0; padding: 0; } .border{width: 200px; height: 100%;background-color: #5daeff;} div,ul li,p,a{ list-style: none;} .labels{} p{text-align: center;color: white;line-height: 50px;font-size: 20px;} a{ color: white;text-decoration: none; } .tab{display: none;background-color:#77BCF7; } .tab p{font-size: 16px;line-height: 40px;} .labels{border-bottom:solid gainsboro 1px;} </style>样式添加好了，不过是固定的，没有滑动的效果。
最后一步，用jquery中的mouseover()和slideDown()方法来为它添加滑动效果（在这里提示一下，原本想用mouseout()方法来做滑出的，但是出现了错误，只要鼠标划出一级标签外，不管是到二级标签上还是外面都会被定义为"鼠标指针从元素上移开",就会被触发）
<script> $(function(){ $(".labels_1").mouseover(function () { $(".one").slideDown(); }).mouseleave(function () { $(".one").slideUp(); }) $(".labels_2").mouseover(function () { $(".two").slideDown(); }).mouseleave(function () { $(".two").slideUp(); }) $(".labels_3").mouseover(function () { $(".three").slideDown(); }).mouseleave(function () { $(".three").slideUp(); }) $(".labels_4").mouseover(function () { $(".four").slideDown(); }).mouseleave(function () { $(".four").slideUp(); }) }) </script>好了，到这里就结束了，效果就是最上面展示的，如果有什么不对请私信我。
