<!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 & 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 & 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 & 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 & 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 & Massagers</ a ></ h3 >
< div class = "menu-list-link" >
</ div >
</ li >
< li >
< h3 >< a href = "health-fitness-c19_70.html" >Health & Fitness</ a ></ h3 >
< div class = "menu-list-link" >
</ div >
</ li >
</ ul >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
| 
