提示
检查导入JAR包没
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>下拉列表</title><style>*{padding:0;margin:0;}ul,ol,li{list-style: none;}a{text-decoration:none;color:#1a66b3;font-size: 12px;font-family: Arial, 微软雅黑;}.on ul{display: none;}.on{width: 100px;border: 1px solid #e6e6e6;line-height: 20px;background:#fff;}a:hover{color:#ff2832;}.topDown li:hover{background:#f2f2f2;color:#000;}.xia{margin: 0px auto; width: 200px;}.top-m > li a{padding:0 18px;}.top-m > li{line-height:22px;padding-top:5px;}</style></head><body><div class="xia"><ul class="top-m"><li class="on"><a href="" class="menu-btn">我的当当</a><ul class="topDown"><li><a href="">我的积分</a></li><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 src="js/jquery-1.12.4.js"></script><script>$(document).ready(function(){$(".on").hover(function(){$(".topDown").show();},function(){$(".topDown").hide();});});</script></body></html>
实现效果
如果觉得《HTML+CSS+JQuery实现下拉菜单鼠标悬浮显示下拉列表 取消隐藏》对你有帮助,请点赞、收藏,并留下你的观点哦!