<div class="block"> <div class="box" id="1"> menu1 <div class="submenu" id="1"> <div class="box2">item1_1</div> <div class="box2">item1_2</div> <div class="box2">item1_3</div> <div class="box2">item1_4</div> <div class="box2">item1_5</div> </div> </div> <div class="box " id="2"> menu2 <div class="submenu" id="2"> <div class="box2">item2_1</div> <div class="box2">item2_2</div> <div class="box2">item2_3</div> <div class="box2">item2_4</div> <div class="box2">item2_5</div> </div> </div> <div class="box" id="3"> menu3 </div> <div class="box" id="4"> menu4 </div> <div class="box" id="5"> menu5 </div> </div>
$('.submenu').hide(); $(".box").hover(function(){ $(this).find(".submenu").stop().fadeToggle(700); });
.block{ width: 615px; border: solid 1px #aaa; text-align: center; white-space: nowrap; overflow: hidden; } .box{ width: 100px; height: 50px; border: solid 1px #ccc; display: inline-block; vertical-align: middle; } .submenu{ width: 615px; height:300px; position:absolute;left:8px;top:60px; border: solid 1px #aaa; text-align: center; white-space: nowrap; overflow: hidden; } .box2{ width: 200px; height: 200px; border: solid 1px #ccc; display: inline-block; vertical-align: middle; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)