<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 一般对于盒子div而言我们所作出的div层数需要与我们所想的div层数多一个以便position的修改 --> <script src="jquery.js"></script> <style> *{ margin: 0; padding: 0; } .header{ position: relative; background-color: chartreuse; text-align: center; height:32px; line-height: 32px; } .pg_header{ position: absolute; left:20px; width:100%; } .header-nav{ height: 32px; } .header-nav .nav-content{ left: 20px; width: 120px; background-color: pink; } .header-nav .nav-content a{ } .container{ width:200px; } .menu-category .category .title{ height:32px; background-color: gold; } .menu-category .category .body{ height:32px; background-color: purple; } .header-menu{ position: relative; } .menu-content{ position: absolute; top:0px; left:200px; } .hide{ display: none; } .show{ display: block; } .current{ border-left: 2px solid red; } .menu-content .item{ position: absolute; width: 200px; top: 0px; left: 0px; } .menu-content .item dl{ background-color: darkgray; } </style> </head> <body> <div class="header"> <div class="pg_header"> <div class="header-nav"> <div class="nav-content"> <a id="all_menu_category">全部商品</a> </div> </div> <div class="header-menu"> <div class="container hide"> <div class="menu-category" id="nav_all_menu"> <div class="category" float-content="one"> <div class="title">厨房用品</div> <div class="body"> <a href="#">锅子</a> </div> </div> <div class="category" float-content="two"> <div class="title">家电</div> <div class="body"> <a href="#">空调</a> </div> </div> <div class="category" float-content="three"> <div class="title">床上用品</div> <div class="body"> <a href="#">床单</a> </div> </div> </div> <div class="menu-content" id="nav_all_content"> <div class="item hide" float-id="one"> <dl> <dt><a href="#">厨房用品1</a></dt> <dd> <span>|<a href="#">角阀1</a></span> </dd> </dl> <dl> <dt><a href="#">厨房用品1</a></dt> <dd> <span>|<a href="#">角阀1</a></span> </dd> </dl> <dl> <dt><a href="#">厨房用品1</a></dt> <dd> <span>|<a href="#">角阀1</a></span> </dd> </dl> </div> <div class="item hide" float-id="two"> <dl> <dt><a href="#">厨房用品2</a></dt> <dd> <span>|<a href="#">角阀2</a></span> </dd> </dl> <dl> <dt><a href="#">厨房用品2</a></dt> <dd> <span>|<a href="#">角阀2</a></span> </dd> </dl> <dl> <dt><a href="#">厨房用品2</a></dt> <dd> <span>|<a href="#">角阀2</a></span> </dd> </dl> </div> <div class="item hide" float-id="three"> <dl> <dt><a href="#">厨房用品3</a></dt> <dd> <span>|<a href="#">角阀3</a></span> </dd> </dl> <dl> <dt><a href="#">厨房用品3</a></dt> <dd> <span>|<a href="#">角阀3</a></span> </dd> </dl> <dl> <dt><a href="#">厨房用品3</a></dt> <dd> <span>|<a href="#">角阀3</a></span> </dd> </dl> </div> </div> </div> </div> </div> </div> </body> </html> <script> $(function(){ change("#all_menu_category","#nav_all_menu","#nav_all_content"); }) function change(menuF,menuS,menuT){ $(menuF).bind('mouseover',function () { $(menuS).parent().removeClass('hide'); }); $(menuF).bind('mouseout',function(){ $(menuS).parent().addClass('hide'); }); // $(menuS).bind('mouseover',function () { // $(menuS).parent().removeClass('hide'); // }) $(menuS).children().bind('mouseover',function(){ $(menuS).parent().removeClass('hide'); var tag=$(this).attr('float-content'); var item=$(menuT).find('[float-id="'+tag+'"]'); item.removeClass('hide').siblings().addClass('hide'); }); $(menuS).children().bind('mouseout',function(){ $(menuS).parent().addClass('hide'); $(menuT).children().addClass('hide'); }); $(menuT).children().bind('mouseover',function(){ $(menuS).parent().removeClass('hide'); $(this).removeClass('hide'); }) $(menuT).children().bind('mouseout',function(){ $(menuS).parent().addClass('hide'); $(this).addClass('hide'); }) $(menuS).children().hover(function () { $(this).addClass('current'); },function(){ $(this).removeClass('current'); }) // $(menuS).find('.category').hover(function(){ // var tag=$(this).attr('float-content'); // var attrStr='[float-id="'+tag+'"]'; // $(menuT).find('item'+attrStr).show(); // }) } </script>