菜单控件出现在包含DIV的下面 [英] Menu Control appears underneath containing DIV

问题描述

我在自己的网站上工作，我在左侧和右侧分别有两个Divs，在中心有四个Divs，其中MasterPage中包含占位符，

-在左上方的第一个div中，我添加了菜单控件，该控件可在PageLoad处动态显示DBs表中的数据.

-我的问题是MenuControl主要项目正确显示，但嵌套菜单项目显示在div下，而我无法从右侧或底部看到它.

i''m working on my own site, and i have twice three Divs on the Right and Left, and four Divs in Center containing Place Holders in MasterPage,

- at first div above-Left i added Menu Control that''s show data from DBs Tables Dynamically at PageLoad.

- My problem is the MenuControl Main Items appears correctly but Nested Menu Items appears under div and i can''t see it from right or bottom .

<div class="box">
                    <div class="box_header">
                        <h2>Training Menu</h2>
                        <img class="box_icon" src="images/edutainment.png" />
                    </div><!--end box_header -->
                    <div class="box_body">

                        <asp:Menu ID="mnuTraining" runat="server">

                        </asp:Menu>

                    </div><!--end box_body -->
                    <div class="box_footer"></div><!--end box_body -->
                </div><!--end box -->

-> CSS文件->

-- > CSS FILE -->

#left{
    overflow:visible;
    width:200px;
    float:left;
    min-height:200px;
    margin-right:20px;
}

.box{
    overflow:visible;
    margin-bottom:20px;
}

.box_header{
    position:relative;
    overflow:visible;
    background:url(images/box_header.png) no-repeat;
    height:30px;
    line-height:30px;
}

.box_header h2{
    color:#FFF;
    font-size:14px;
    margin-left:10px;
}

.box_header img.box_icon{
    position:absolute;
    right:5px;
    top:-10px;
}

.box_body{
    min-height:100px;
    background:#f0f0f0;
    padding:5px;
    border-left:1px solid #bfbfbf;
    border-right:1px solid #bfbfbf;
}

.box_body ul{

}

.box_body li{
    display:block;
    border-bottom:1px solid #bfbfbf;
    height:25px;
    line-height:25px;
    margin-bottom:5px;
    font-size:12px;
}

.box_body a:hover{
    color:#666;
    text-decoration:none;
}

.box_footer{
    background:url(images/bottom_curves.png) no-repeat;
    height:14px;
}

推荐答案

只需告知该框尽可能位于最高位置即可.

Just tell that box to be as topmost as possible.

.subitem_box { z-order:99999; }

HTML元素按代码本身的出现顺序加载TOP-DOWN.
因此，自然而然地，在代码中第一个出现的任何项目都将出现在其他项目的"OnTop"中，除非您明确告知不要这样做.
只需记住，无论您将元素的z顺序设置为多大，组合框的下拉列表都具有z无限的z顺序(至少在IE中如此)，因此它始终位于所有元素的顶部时间.

HTML elements load TOP-DOWN in order of apperance in the code itself.
So naturally any item that appears FIRST in the code will appear "OnTop" of other items unless you explicitly tell it not to.

Just remember that no matter how large you make your z-order of an element the drop-down list of a combo-box has a z-order of infinity (at least in IE it does) so it will always be ontop of everything all the time.

这篇关于菜单控件出现在包含DIV的下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！