实现效果：悬浮总菜单，显示分类菜单，移走隐藏总菜单，悬浮分类菜单，显示商品种类，移走隐藏商品种类和分类菜单，悬浮商品种类，显示商品种类和分类菜单，移走隐藏商品菜单和分类菜单。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>商城菜单</title> 6 ????<style> 7 ????????.second{ 8 ????????????float: left; 9 ????????}10 ????????.three{11 ????????????float: left;12 ????????}13 ????????.hide{14 ????????????display: none;15 ????????}16 ????</style>17 </head>18 <body>19 ????<div class="first">20 ????????????<strong>全部商品</strong>21 ????</div>22 23 ????<div class="outer hide">24 25 ????????<div class="second">26 ????????????????<div menu-one="one">家电</div>27 ????????????????<div menu-one="two">生鲜</div>28 ????????</div>29 ????????<div class="three">30 ????????????<div class="item hide" menu-one-content="one">31 ????????????????<div>手机</div>32 ????????????????<div>电视</div>33 ????????????</div>34 ????????????<div class="item hide" menu-one-content="two">35 ????????????????<div>带鱼</div>36 ????????????????<div>螃蟹</div>37 ????????????</div>38 ????????</div>39 40 ????</div>41 <script src="jquery-1.8.2.js"></script>42 <script>43 ????$(function () {44 ????????$(‘.first‘).bind(‘mouseover‘,function () {45 ????????????$(‘.second‘).parent().removeClass(‘hide‘)46 ????????});47 ????????$(‘.first‘).bind(‘mouseout‘,function () {48 ????????????$(‘.second‘).parent().addClass(‘hide‘)49 ????????});50 51 ????????$(‘.second‘).children().bind(‘mouseover‘,function () {52 ????????????$(‘.second‘).parent().removeClass(‘hide‘);53 ????????????var num = $(this).attr(‘menu-one‘);54 ????????????$(‘.three‘).find(‘[menu-one-content="‘+num+‘"]‘).removeClass(‘hide‘)55 ????????});56 ????????$(‘.second‘).children().bind(‘mouseout‘,function () {57 ????????????$(‘.second‘).parent().addClass(‘hide‘);58 ????????????// var num = $(this).attr(‘menu-one‘);59 ????????????// $(‘.three‘).find(‘[menu-one-content="‘+num+‘"]‘).addClass(‘hide‘)60 ????????????$(‘.three‘).children().addClass(‘hide‘)61 ????????});62 63 ????????$(‘.three‘).children().bind(‘mouseover‘,function () {64 ????????????$(‘.second‘).parent().removeClass(‘hide‘);65 ????????????$(this).removeClass(‘hide‘);66 ????????});67 ????????$(‘.three‘).children().bind(‘mouseout‘,function () {68 ????????????$(‘.second‘).parent().addClass(‘hide‘);69 ????????????$(this).addClass(‘hide‘);70 ????????});71 ????})72 </script>73 </body>74 </html>jquery之商城菜单
原文地址：https://www.cnblogs.com/wenxianfeng/p/10355612.html