大家好，欢迎来到IT知识分享网。
1.导入js
登录官网jQuery点击下载，写入js文件，并引入
2.html部分
<style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #FECC5B; } .nav ul li a:hover { background-color: #FFF5DA; } </style> </head> <body> <ul class="nav"> <li> <a href="#">发布文章</a> <ul> <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> </ul> </li> </ul> </body>3.js部分
<script> $(function(){ //鼠标经过 $(".nav>li").mouseover(function(){ $(this).children("ul").show();//显示元素 }) //鼠标离开 $(".nav>li").mouseout(function(){ $(this).children("ul").hide();//显示元素 }) }) </script>4.效果预览
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/110905.html
