nbsp;html>*{ padding: 0px; margin: 0px; } #top{width: auto;height: 30px;background: #eee;position: relative;} #top li{float: left; text-align: center; width: 80px; height:30px; line-height:30px; list-style: none; } /*设置位置*/ .position{ position: absolute; border: 1px solid #ccc; top:30px; padding: 3px; font-size: 15px; display: none; } .shoucang{width: auto;left: 10px;} .sell{width: auto;left: 70px;} .customer{width: auto;left: 180px;} .bg{background-color: #DDA0DD;cursor: pointer;} $(function(){ $(".li1").hover(function(){ $(".shoucang").show();/*显示收藏的菜单内容*/ $(".customer,.sell").hide();/*隐藏其他的菜单内容*/ },function(){ $(".shoucang").hide();/*鼠标离开，收藏的菜单内容隐藏*/ }); $(".li2").hover(function(){ $(".sell").show(); $(".customer,.shoucang").hide(); },function(){ $(".sell").hide(); }); $(".li3").hover(function(){ $(".customer").show(); $(".shoucang,.sell").hide(); },function(){ $(".customer").hide(); }); $("#top p").hover(function(){/*鼠标放置在p位置上，显示下拉菜单*/ $(this).show(); },function(){/*鼠标离开在p位置上，隐藏下拉菜单*/ $(this).hide(); }); $(".sell p,.shoucang p,.customer p").bind("mouseover",function(){ $(this).addClass("bg"); }); $(".sell p,.shoucang p,.customer p").bind("mouseout",function(){ $(this).removeClass("bg"); }); });
- 收藏夹 卖家中心 联系客服
收藏的宝贝
收藏的店铺
免费开店
已出售的报宝贝
出售中的报宝贝
卖家服务市场
消费者客服
卖家客服
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
jQuery操作输入框统计字数
jQuery表格顶栏固定效果
jquery插件扩展使用详解
以上就是jQuery做出菜单导航栏功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2770394.html
