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

我有我的追问SharePoint文档库文件夹，并建立了基于文件夹的子菜单结构生成radmenu。当我将许多控件放在页面上时，其他控件的根菜单显示在控件的子菜单上。有没有人知道如何通过编程将z-index的样式分配到子菜单来防止它？请参阅附件以更好地了解问题。该文本被公共消费卫生。Radmenu悬停菜单下的其他Radmenus显示了在IE8

附加信息：当滑过菜单和子项菜单显示它并盖好，其他菜单，他们不显示出来。但是，当第二次滚动时，它肯定会透过，好像它的z-index更大。

这些控件是各自在自己的webpart，关系？也许他们继承了z-index？

作用仅发生在IE，而不是在铬或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浏览器中复制一些bug的。这似乎是与radmenu错误，而不是IE浏览器。 IE只是让bug更快发生。这里是它不能正常工作，可以大概得到真正容易复制，在最后一个例子是一个屏幕捕捉视频的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

来源

2011-12-13 Pertinent Info

看着你现在的样子设置你的RadMenu的它可能是最好定义的Z - 为每个索引定义菜单，使其从左到右具有更低和更低的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开发工具中检查），那么显式设置每个RadMenu的z-index可能会更容易（或包含元素），因为这将保证期望的行为而不管继承，因为应该以更高的特异性在项目本身上设置属性。

此外，如果您的页面上的其他元素设置了z-index集合，则可能会阅读此文章“Understanding CSS z-index”。

来源

2011-12-16 17:26:06 carlbergenhem

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

回答

相关问题