如何对齐.submenu而不是脱臼

本文介绍了如何对齐.submenu而不是脱臼的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望通过实现删除和隐藏菜单效果

这里是小提琴

[^ ]

如何将它对齐在屏幕的中心而不是脱臼.submenu

这里是代码

HTML：

< div class =block> 
< div class =boxid =1> 
 menu1 
< div class =submenuid =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 =boxid =2> 
 menu2 
< div class =submenuid =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 =boxid =3> 
 menu3 
< / div> 
< div class =boxid =4> 
 menu4 
< / div> 
< div class =boxid =5> 
 menu5 
< / div> 
 
< / div>

JQERY：

 $（'。submenu' ）。隐藏（）; 
 
 
 $（。box）。hover（function（）{
 $（this）.find（。submenu）。stop（）。fadeToggle（700 ）; 
}）;

CSS：

 .block {
宽度：615px ; 
 border：solid 1px #aaa; 
 text-align：center; 
 white-space：nowrap; 
溢出：隐藏; 
} 
 .box {
宽度：100px; 
身高：50px; 
 border：solid 1px #ccc; 
 display：inline-block; 
 vertical-align：middle; 
} 
 .submenu {
宽度：615px; 
身高：300px; 
 position：absolute; left：8px; top：60px; 
 border：solid 1px #aaa; 
 text-align：center; 
 white-space：nowrap; 
溢出：隐藏; 
} 
 .box2 {
宽度：200px; 
身高：200px; 
 border：solid 1px #ccc; 
 display：inline-block; 
 vertical-align：middle; 
}

感谢您的帮助和时间

解决方案

I want to achieve drop and hide menu effect from http://www.inc.com/
here is fiddle
http://jsfiddle.net/56ThC/1/[^]
how to align it to be at a center of the screen and not to have dislocated .submenu
here is the code

HTML:

<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>

JQERY:

$('.submenu').hide();


$(".box").hover(function(){
    $(this).find(".submenu").stop().fadeToggle(700);
});

CSS:

.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;
           }

Thanks for your help and time

解决方案

这篇关于如何对齐.submenu而不是脱臼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

SubMenu

如何对齐.submenu而不是脱臼

问题描述