Radmenu悬停菜单显示在IE8中的其他Radmenus下

时间：2011-12-13 17:52:20

标签： html css internet-explorer telerik

我有一个radmenu，我通过检查sharepoint文档库文件夹并基于该文件夹构建子菜单结构来生成。当我在页面上放置许多控件时，来自其他控件的根菜单显示在控件的子菜单上。有没有人知道如何防止它，通过以编程方式将z-index的样式分配给子菜单？请参阅附件以更好地了解该问题。该文本已经过消毒，供公众使用。

附加信息：滚动菜单时，子项菜单显示它确实覆盖了其他菜单，但它们没有显示。然而，当第二次翻过它时，它肯定会显示出来，好像它的z-index更大。

这些控件都在自己的webparts中，这有关系吗？也许他们继承了z-index？

效果仅发生在IE中，而不是Chrome或Firefox中。

我的ascx :( customItem是子菜单），这些css类以编程方式应用于根项和子菜单项。

<style type="text/css">
.CustomItem
{
     z-index:99999;
}

.rootItem
{
    text-align:center !important;
    text-decoration:none !important;
    z-index:-1;
}
.CustomItem:hover
{
 text-decoration:none !important;  

}
</style>
<div id="section" runat="server" >
<telerik:RadMenu ID="FolderMenu" runat="server">
</telerik:RadMenu>

screenshot

以下是更新：我在Chrome浏览器中重现了一些错误。这似乎是radmenu而不是IE的错误。 IE只是让错误发生得更快。 这是一个不能正常工作的例子，可以很容易地再现，最后是一个屏幕截图视频，z-index如何搞砸。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
<style type="text/css">
   .CustomItem
    {
   position:relative;

    text-align:center !important;
    text-decoration:none !important;
   /* z-index:0 !important;*/

        top: 0px;
        left: 0px;
    }

/* .rootItem
{
    position:relative;

    text-align:center !important;
    text-decoration:none !important;

}*/
   .CustomItem:hover
 {
  position:relative;
  text-decoration:none !important;  

 }

</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <%--Needed for JavaScript IntelliSense in VS2010--%>
        <%--For VS2008 replace RadScriptManager with ScriptManager--%>
        <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.Core.js, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />
        <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQuery.js, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />
        <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQueryInclude.js, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />
    </Scripts>
</telerik:RadScriptManager>

<script type="text/javascript">
    //Put your Java Script code here.
</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
    <telerik:RadMenu runat="server" ID="FolderMenu" cssclass="CustomItem" >
        <Items>
            <telerik:RadMenuItem Text="Item1" >
                <Items>
                    <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                     <Items>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     </Items>
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
    <br />
    <telerik:RadMenu runat="server" ID="RadMenu1" cssClass="CustomItem">
        <Items>
            <telerik:RadMenuItem Text="Item1" >
                <Items>
                    <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                     <Items>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     </Items>
                    </telerik:RadMenuItem>

                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>


    </telerik:RadMenu> <br />
    <telerik:RadMenu runat="server" ID="RadMenu2" cssClass="CustomItem">
        <Items>
            <telerik:RadMenuItem Text="Item1" >
                <Items>
                    <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                      <Items>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     </Items>
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>


    </telerik:RadMenu>
    <br />
    <telerik:RadMenu runat="server" ID="RadMenu3" cssClass="CustomItem">
        <Items>
            <telerik:RadMenuItem Text="Item1" >
                <Items>
                    <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                      <Items>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     </Items>
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="sub item1">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>


    </telerik:RadMenu>
</div>
</form>

这是屏幕截图视频，显示它是如何混乱的 http://youtu.be/oOdJY65l6AA

1 个答案:

答案 0 :(得分：0)

看看你设置RadMenu的方式，最好为每一个定义一个z-index，定义菜单从左到右的z和索引越来越低。

我相信你可以在你的视频中看到（至少我在复制+粘贴代码时看到它）第二个RadMenu（RadMenu1）的z-index比第一个更高，导致FolderMenu的子菜单出现在“RadMenu1”之下。我只是将CSS略微调整为以下内容：

<style type="text/css">
    .CustomItem
    {
        position: relative;
        text-align: center !important;
        text-decoration: none !important; 
        top: 0px;
        left: 0px;
        z-index:7000 !important;
    }

    .CustomItemTwo
    {
        z-index:6500 !important;
    }

    .CustomItemThree
    {
        z-index:6000 !important;
    }

    .CustomItemFour
    {
        z-index:5500 !important;
    }

    .CustomItem:hover
    {
        position: relative;
        text-decoration: none !important;
    }
</style>

请原谅不良名字的用法，但是你明白了;）那么对于RadMenus：

<telerik:RadMenu runat="server" ID="FolderMenu" CssClass="CustomItem">
    ...
</telerik:RadMenu>
<br />
<telerik:RadMenu runat="server" ID="RadMenu1" CssClass="CustomItem CustomItemTwo">
    ...
</telerik:RadMenu>
<br />
<telerik:RadMenu runat="server" ID="RadMenu2" CssClass="CustomItem CustomItemThree">
    ...
</telerik:RadMenu>
<br />
<telerik:RadMenu runat="server" ID="RadMenu3" CssClass="CustomItem CustomItemFour">
    ...
</telerik:RadMenu>

这阻止了您看到的行为。所以，回想一下你的原始问题，如果出于某种原因继续进行z-index的继承（可以在chrome dev工具中查看），那么显式设置每个RadMenu的z-index可能会更容易一些。 （或包含元素），因为这将保证所需的行为，无论继承如何，因为应该以具有更高特异性的项目本身设置的属性为准。

此外，如果您的网页上的其他元素设置了z-index，那么阅读此“Understanding CSS z-index”文章可能会有所帮助。

相关问题
最新问题