Current location - Recipe Complete Network - Complete cookbook - Div+css vertical secondary menu, expand minus sign, not expand plus sign code.
Div+css vertical secondary menu, expand minus sign, not expand plus sign code.
& lt! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "/Ajax/libs/jquery/ 1 . 7 . 2/jquery . min . js " type = " text/JavaScript " & gt; & lt/script & gt;

& ltscript type = " text/JavaScript " & gt;

$ (document). ready(function(){

var mod_menu=$("。 mod-menu”); //Navigation module area

var menu=function(){

var menuItem=$("。 Menu item li "); //Select the navigation list

menuItem.each(function(){

Var _index=$ (this). index(); //Get the index of the currently selected menu list.

$ (this). mouseenter(function(){

Var y = $ (this). Location (). top+ 1; //Get the top coordinates of the list that the current mouse hovers over.

$ (".Menu-Continued"). show();

$ (".Menu-Continued"). css("top ",y); //The corresponding index content to be displayed

$ (this). addClass("mouse-bg ")。 Brothers and sisters (). remove class(" mouse-BG ");

$ (".menu-cont > div”)。 eq(_index)。 Display (). Brothers and sisters (). hide();

});

}); /* Navigation Menu */

$ (".Mode menu"). mouseleave(function(){

$ (".Menu-Continued"). hide();

menuitem . remove class(" mouse-BG ");

})

}//Expand the secondary menu

menu(); //Perform the function of expanding the secondary menu.

});

& lt/script & gt;

& lt/head & gt;

& ltbody & gt

& lth 1 & gt; Simple two-level menu navigation

& ltdiv class="mod-menu f-l " >

& ltdiv id="column-left " >

& ltul class="menu-item " >

& lt Li class = ""> & ltahref = "trade-wedding.html">. Wedding & lt/a & gt;; & lt/ Li>

& lt Li class = ""> & ltahref = "trade-scenario-dresses.html">. Occasional dress & lt/a & gt;; & lt/ Li>

& lt Li class = ""> & ltahref = "trade-women-s-clothing.html">. Women's wear & lt/a & gt;; & lt/ Li>

& lt Li class = ""> & ltahref = "trade-women-s-shoes.html">. Women shoes & lt/a & gt;; & lt/ Li>

& lt Li class = ""> & ltahref = "trade-accessories.html">. Accessories & lt/a & gt;; & lt/ Li>

& lt Li class = ""> & ltahref = "trade-beauty-health.html">. Beauty and health. Health & lt/a & gt;; & lt/ Li>

& lt/ul & gt; & lt! -Level 1 menu list->

& lt div class = "menu-conthide" style = "display: none; top:24 1px;" & gt

& ltdiv class = " menu-cont-list " style = " display:none; & gt

& ltul & gt

& lt Li>

& lth3 & gt& lta href= "Wedding dress -c 1_2.html" >. Wedding dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >& lt/div & gt;

& lt/ Li>

& lt Li>

& lth3 & gt& lta href= "Bridesmaid dress -c 1_3.html" > Bridesmaid dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "wedding-party-dresses-c1_ 4.html" > wedding dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lta title = " " href = " mother-of-the-brides-dresses-c 1 _ 4 _ 36 . html " & gt; Mother of bridal gowns & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "flower-girl-dresses-c1_ 4 _ 37.html" > flower girl dress & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "wedding-guest-dresses-c1_ 4 _ 38.html" > wedding guest dresses & lt/a & gt;;

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "wedding-accessories-c1_ 6.html" > wedding ornaments & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lta title = ""href = "fabric-swatch-c1_ 6 _100.html" > fabric samples

& ltspan class="long-string " >| & lt/span>。

& lta title="" href= "Bridal underwear-c1_ 6 _1kloc-0/.html" > Bridal underwear & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "wedding-veils-c1_ 6 _ 48.html" > wedding veil & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& lta title = ""href = "wedding-gloves-c1_ 6 _ 51.html" > wedding gloves & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "wedding-shalls-c1_ 6 _ 47.html" > wedding shawl & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "wedding-flowers-c1_ 6 _ 52.html" > wedding flowers & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& lta title = " " href = " wedding-petticks-c 1 _ 6 _ 120 . html " & gt; Wedding dress & lt/a & gt;;

& lt/div & gt;

& lt/ Li>

& lt/ul & gt;

& lt/div & gt;

& ltdiv class = " menu-cont-list " style = " display:none; & gt

& ltul & gt

& lt Li>

& lt H3> & ltahref = "prom-dresses-c103 _ 39.html" > prom dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "military-ball-dresses-c103 _118.html" > military ball dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lth3 & gt& lta href= "Evening dress -c 103_40.html" > Evening dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "cocktail-dresses-c103 _ 41.html" > cocktail dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "ball-obses-c103 _ 43.html" > prom dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lth3 & gt& lta href = " homecome-dresses-c 103 _ 44 . html " & gt; Homecoming dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "little-black-dresses-c103 _ 45.html" > Little black dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3>< a href = "quinceanera-dresses-c103 _ 46.html" > bar mitzvah dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt/ul & gt;

& lt/div & gt;

& ltdiv class = " menu-cont-list " style = " display:none; & gt

& ltul & gt

& lt Li>

& lth3 & gt& lta href = " dresses-C7 _ 8 . html " & gt; Dress & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

< H3><a href = "clubwear-C7 _ 9.html" > club clothing & lt /a & gt; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lth3 & gt& lta href = " leggings-C7 _ 12 . html " & gt; Leggings & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lth3 & gt& lta href = " lingeries-C7 _ 13 . html " >Lingeries & lt/a & gt; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& ltatitle = ""href = "bras-C7 _13 _ 54.html" > bra & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& lta title = " " href = " baby dolls-C7 _ 13 _ 56 . html " >Babydolls & lt/a & gt;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "teddies-C7 _13 _ 57.html" > teddy bear & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "Panettes-C7 _13 _ 58.html" > underwear & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "socks-C7 _13 _ 59.html" > socks & lt/a & gt;;

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "Busters-corsets-C7 _102.html" > Corset & Corset & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lth3 & gt& lta href = " costumes-C7 _ 53 . html " & gt; Clothing & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lta title = " " href = " sexy-costumes-C7 _ 53 _ 1 10 . html " & gt; Sexy clothes & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "Christmas-Costumes-C7 _ 53 _119.html" > Christmas clothes & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& lta title="" href= "Halloween-costume-C7 _ 53 _11.html" > Halloween costume & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& lta title="" href= "Halloween-Accessories -c7_53_ 1 12.html" > Halloween Accessories & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& lta title = " " href = " zentai-C7 _ 53 _ 12 1 . html " >Zentai & lt/a & gt;

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "Swimware-C7 _11.html" > Swimwear & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "activewear-C7 _10.html" > sportswear & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt/ul & gt;

& lt/div & gt;

& ltdiv class = " menu-cont-list " style = " display:none; & gt

& ltul & gt

& lt Li>

& lt H3> & ltahref = "heels-c116 _ 60.html" > high heels & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "pumps-c116 _117.html" > pump & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "dance-shoes-c116 _ 62.html" > dancing shoes & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lth3 & gt& lta href = " boots-c 1 16 _ 63 . html " >Boots & lt/a & gt; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt/ul & gt;

& lt/div & gt;

& ltdiv class = " menu-cont-list " style = " display:none; & gt

& ltul & gt

& lt Li>

& lt H3> & ltahref = "even-bags-c15 _13.html" > evening package & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lth3 & gt& lta href = "hats- scarf -c 15_ 16.html" > hats & scarves & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& ltatitle = ""href = "women s-hats-c15 _16 _ 64.html" > women's hats & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& lta title = ""href = "women s-scarves-c15 _16 _ 65.html" > women's scarves & lt/a & gt;;

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "jewelry-c15 _17.html" > jewelry & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lta title="" href= "Earrings -c 15_ 17_66.html" > Earrings & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& lta title="" href= "Necklace -c 15_ 17_67.html" > Necklace & lt/a & gt;;

& ltspan class="long-string " >| & lt/span>。

& ltatitle = ""href = "rings-c15 _17 _ 68.html" > ring & lt/a & gt;;

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "watches-c15 _18.html" > watches & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt/ul & gt;

& lt/div & gt;

& ltdiv class = " menu-cont-list " style = " display:block; & gt

& ltul & gt

& lt Li>

& lt H3> & ltahref = "wigs-hair-extensions-c19 _ 23.html" > wigs & hair extensions & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "Fascina Tors-c19 _ 69.html" > Charming person & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "make up-tools-c19 _ 21.html" > cosmetic tools & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "spas-messagers-c19 _ 71.html" > spa and beauty. Massager ; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt Li>

& lt H3> & ltahref = "health-fitness-c19 _ 70.html" > health and wellness. Fitness & lt/a & gt;; & lt/H3 & gt;

& ltdiv class="menu-list-link " >

& lt/div & gt;

& lt/ Li>

& lt/ul & gt;

& lt/div & gt;

& lt/div & gt;

& lt/div & gt; & lt! -Secondary menu content->

& lt/div & gt;

& lt/body & gt;

& lt/html & gt;