简单的二级菜单导航实现css代码

这种效果在B2C商城经常用的到，刚结束的项目就用到了，简单分享下。
Demo：http://www.ostools.net/jsbin/uiafeaei/1
!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html XMlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title> 无标题文档/title> style type="text/css"> ul{ margin:0; padding:0; list-style-type:none; } a{ text-decoration:none; } .mold_open_hover,.mold_open{ background-image:url(../image/open.png); background-repeat:none; display:inline-block; width:10px; height:6px; margin-left:10px; position:relative; top:-2px; } .mold_open{ background-position:0 -6px; } .mold_open_hover{ background-position:0 0; } .mod-menu{ position:relative; z-index:1000; left:-1px; margin-left:100px; } h1{ margin-left:100px; } .menu-cont-list a:hover{ text-decoration:underline; } .mod-menu .menu-item{ width:220px; border-top:solid 1px #d59bb2; border-bottom:solid 2px #d59bb2; position:relative; z-index:22; } .mod-menu .menu-item li{ height:47px; line-height:47px; background:#feebf3; border-top:solid 1px #f0bfd3; } .mod-menu .menu-item li.mouse-bg{ background:url(../image/mouse-menu-bg.jpg) no-repeat #fff; position:relative; z-index:22; margin-right:-4px; } .mod-menu .menu-item a{ color:#c81d61; font-Size:16px; padding-left:33px; display:block; height:45px; border-top:solid 1px #F1f2f7; } .mod-menu .menu-item a:hover{ text-decoration:none; } .mod-menu .menu-cont{ position:absolute; left:220px; top:1px; background:#fff; width:573px; border:solid 1px #F0BFD3; box-shadow:2px 0 10px rgba(210,33,103,0.25); z-index:20; } .mod-menu .menu-cont-list{ padding:0 30px; } .mod-menu .menu-cont-list li{ border-bottom:dotted 1px #f0bfd3; padding:10px 0; } .mod-menu .menu-cont-list li:last-child{ border-bottom:none; } .mod-menu .menu-cont-list h3{ font-size:14px; font-weight:700; } .mod-menu .menu-cont-list h3 a{ color:#222; } .mod-menu .menu-list-link a{ color:#666; line-height:24px; } .mod-menu .menu-list-link .long-string{ color:#ccc; font-size:12px; padding:0 10px; } /style> script src="http://ajax.GOOGLEapis.COM/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> /script> script type="text/javascript"> $(document).ready(function(){ VAR mod_menu=$(".mod-menu"); //导航模块区 var menu=function(){ var menuItem=$(".menu-item li"); //选择导航列表 menuItem.each(function(){ var _index=$(this).index(); //获取当前选择菜单列表的索引 $(this).mouseenter(function(){ var y = $(this).position().top+1; //获取当前鼠标滑过的列表的顶部坐标 $(".menu-cont").show(); $(".menu-cont").css("top",y); //需要显示的对应索引内容 $(this).addClass("mouse-bg").siblings().removeClass("mouse-bg"); $(".menu-cont> div").eq(_index).show().siblings().hide(); } ); } ); /*导航菜单菜单*/ $(".mod-menu").mouseleave(function(){ $(".menu-cont").hide(); menuItem.removeClass("mouse-bg"); } ) } //展开二级菜单 menu(); //执行展开二级菜单函 } ); /script> /head> body> h1> 简单的2级菜单导航/h1> div class="mod-menu f-l"> div id="column-left"> ul class="menu-item"> li class=""> a href="trade-wedding.html"> Wedding/a> /li> li class=""> a href="trade-occasion-dresses.html"> Occasion Dresses/a> /li> li class=""> a href="trade-women-s-clothing.html"> Women's Clothing/a> /li> li class=""> a href="trade-women-s-shoes.html"> Women's Shoes/a> /li> li class=""> a href="trade-accessories.html"> Accessories/a> /li> li class=""> a href="trade-beauty-health.html"> Beauty & amp; Health/a> /li> /ul> !--一级菜单列表--> div class="menu-cont hide" style="display: none; top: 241px; "> div class="menu-cont-list" style="display: none; "> ul> li> h3> a href="wedding-dresses-c1_2.html"> Wedding Dresses/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="bridESMaid-dresses-c1_3.html"> Bridesmaid Dresses/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="wedding-party-dresses-c1_4.html"> Wedding Party Dresses/a> /h3> div class="menu-list-link"> a title="" href="mother-of-the-brides-dresses-c1_4_36.html"> Mother of the Brides Dresses/a> span class="long-string"> |/span> a title="" href="flower-girl-dresses-c1_4_37.html"> Flower Girl Dresses/a> span class="long-string"> |/span> a title="" href="wedding-guest-dresses-c1_4_38.html"> Wedding Guest Dresses/a> /div> /li> li> h3> a href="wedding-accessories-c1_6.html"> Wedding Accessories/a> /h3> div class="menu-list-link"> a title="" href="fabric-swatch-c1_6_100.html"> Fabric Swatch/a> span class="long-string"> |/span> a title="" href="bridal-lingerie-c1_6_101.html"> Bridal Lingerie/a> span class="long-string"> |/span> a title="" href="wedding-veils-c1_6_48.html"> Wedding Veils/a> span class="long-string"> |/span> a title="" href="wedding-gloves-c1_6_51.html"> Wedding Gloves/a> span class="long-string"> |/span> a title="" href="wedding-shawls-c1_6_47.html"> Wedding Shawls/a> span class="long-string"> |/span> a title="" href="wedding-flowers-c1_6_52.html"> Wedding Flowers/a> span class="long-string"> |/span> a title="" href="wedding-petticoats-c1_6_120.html"> Wedding Petticoats/a> /div> /li> /ul> /div> div class="menu-cont-list" style="display: none; "> ul> li> h3> a href="prom-dresses-c103_39.html"> PRom Dresses/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="military-ball-dresses-c103_118.html"> Military Ball Dresses/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="evening-dresses-c103_40.html"> Evening Dresses/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="cocktail-dresses-c103_41.html"> Cocktail Dresses/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="ball-gowns-c103_43.html"> Ball Gowns/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="homecoming-dresses-c103_44.html"> Homecoming Dresses/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="liTTLe-black-dresses-c103_45.html"> Little Black Dresses /a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="quinceanera-dresses-c103_46.html"> Quinceanera Dresses/a> /h3> div class="menu-list-link"> /div> /li> /ul> /div> div class="menu-cont-list" style="display: none; "> ul> li> h3> a href="dresses-c7_8.html"> Dresses/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="clubwear-c7_9.html"> Clubwear/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="leggings-c7_12.html"> Leggings/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="lingeries-c7_13.html"> Lingeries/a> /h3> div class="menu-list-link"> a title="" href="bras-c7_13_54.html"> Bras/a> span class="long-string"> |/span> a title="" href="babydolls-c7_13_56.html"> Babydolls/a> span class="long-string"> |/span> a title="" href="teddies-c7_13_57.html"> Teddies/a> span class="long-string"> |/span> a title="" href="panties-c7_13_58.html"> Panties/a> span class="long-string"> |/span> a title="" href="hosiery-c7_13_59.html"> Hosiery/a> /div> /li> li> h3> a href="bustiers-corsets-c7_102.html"> Bustiers & amp; Corsets/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="costumes-c7_53.html"> Costumes/a> /h3> div class="menu-list-link"> a title="" href="sexy-costumes-c7_53_110.html"> Sexy Costumes/a> span class="long-string"> |/span> a title="" href="christmas-costumes-c7_53_119.html"> Christmas Costumes/a> span class="long-string"> |/span> a title="" href="halloween-costumes-c7_53_111.html"> Halloween Costumes/a> span class="long-string"> |/span> a title="" href="halloween-accessories-c7_53_112.html"> Halloween Accessories/a> span class="long-string"> |/span> a title="" href="zentai-c7_53_121.html"> Zentai/a> /div> /li> li> h3> a href="swimwear-c7_11.html"> Swimwear/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="activewear-c7_10.html"> Activewear/a> /h3> div class="menu-list-link"> /div> /li> /ul> /div> div class="menu-cont-list" style="display: none; "> ul> li> h3> a href="heels-c116_60.html"> Heels/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="pumps-c116_117.html"> Pumps/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="dance-shoes-c116_62.html"> Dance Shoes/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="boots-c116_63.html"> Boots/a> /h3> div class="menu-list-link"> /div> /li> /ul> /div> div class="menu-cont-list" style="display: none; "> ul> li> h3> a href="evening-bags-c15_113.html"> Evening Bags/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="hats-scarves-c15_16.html"> Hats & amp; Scarves/a> /h3> div class="menu-list-link"> a title="" href="womens-hats-c15_16_64.html"> Womens Hats/a> span class="long-string"> |/span> a title="" href="womens-scarves-c15_16_65.html"> Womens Scarves/a> /div> /li> li> h3> a href="jewelry-c15_17.html"> Jewelry/a> /h3> div class="menu-list-link"> a title="" href="earrings-c15_17_66.html"> Earrings/a> span class="long-string"> |/span> a title="" href="necklaces-c15_17_67.html"> Necklaces/a> span class="long-string"> |/span> a title="" href="rings-c15_17_68.html"> Rings/a> /div> /li> li> h3> a href="watches-c15_18.html"> Watches/a> /h3> div class="menu-list-link"> /div> /li> /ul> /div> div class="menu-cont-list" style="display: block; "> ul> li> h3> a href="wigs-hair-extensions-c19_23.html"> Wigs & amp; Hair extensions/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="fascinators-c19_69.html"> Fascinators/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="makeup-tools-c19_21.html"> Makeup Tools/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="spas-massagers-c19_71.html"> Spas & amp; Massagers/a> /h3> div class="menu-list-link"> /div> /li> li> h3> a href="health-fitness-c19_70.html"> Health & amp; Fitness/a> /h3> div class="menu-list-link"> /div> /li> /ul> /div> /div> /div> !--二级菜单内容--> /div> /body> /html>
ffcod = delpost.runcode1 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode1 .value = ffcod; 提示：您可以先修改部分代码再运行

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！