堆栈内存溢出
  简体   繁体   English

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

[英]Radmenu hover menu shows up under other Radmenus in IE8

 原文  2011-12-13 17:52:20  4   1    html/ css/ internet-explorer/ telerik

问题描述

I have a radmenu that I generate by examing sharepoint document library folders and building out a submenu structure based on the folder. 我有一个radmenu，它是通过检查共享点文档库文件夹并基于该文件夹构建子菜单结构而生成的。 When I put many of the control on the page, the root menu from other controls shows up over the sub menu of the control. 当我将许多控件放在页面上时，其他控件的根菜单会显示在控件的子菜单上方。 Does anyone know how to prevent it, by altering programatically assigning the style for the z-index to the sub menus? 有谁知道如何通过以编程方式将z-index的样式分配给子菜单来防止这种情况的发生？ See the attached file for a better understanding of the problem. 请参阅附件以更好地了解问题。 The text was sanitized for public consumption. 案文经过消毒，以供公众消费。

Additional Information: When rolling over the menu and the subitems menu shows it does properly cover the other menus and they do not show through. 附加信息：将鼠标悬停在菜单上时，子项目菜单会显示它确实覆盖了其他菜单，而这些菜单不会显示出来。 However when rolling over it a 2nd time it definitely shows through, as though its z-index is larger. 但是，当它第二次滚动时，它肯定会显示出来，好像它的z-index更大。

These controls are each in their own webparts, does that matter? 这些控件分别位于各自的Web部件中，这有关系吗？ Maybe they're inheriting z-index ? 也许他们继承了z-index ？

The effect only occurs in IE, not in Chrome or Firefox. 该效果仅在IE中发生，而不在Chrome或Firefox中发生。

My ascx: (customItem is the submenu), these css classes are applied programmatically in code to the root item and the submenu items. 我的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>

屏幕截图

Here is an update: I have reproduced some of bug in the Chrome browser. 这是更新：我重现了Chrome浏览器中的一些错误。 It seems like an error with the radmenu and not IE. 似乎是radmenu而不是IE的错误。 IE just makes the bug happen more quickly. IE只是使错误更快地发生。 Here is an example of it not working that can probably be reproduced really easily, at the end is a screen capture video how the z-index messes up. 这是一个不起作用的示例，很可能可以很容易地将其重现，最后是一个截屏视频，其中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>

Here is the screen capture video showing how it messes up http://youtu.be/oOdJY65l6AA 这是截屏视频，显示它如何混乱http://youtu.be/oOdJY65l6AA

1 个解决方案

解决方案1
 0  2011-12-16 17:26:06

Looking at the way you are setting up your RadMenu's it might be best to define a z-index for each one, defining the menus to have lower and lower z-indexes as you go from left to right. 查看您设置RadMenu的方式，最好为每个菜单定义一个z索引，并定义菜单，使其在从左到右时具有越来越低的z索引。

As I believe you can see in your video (at least I saw it when I copied + pasted your code) the second RadMenu (RadMenu1) has a higher z-index than the first one, causing the sub-menu from FolderMenu to appear "under" RadMenu1. 我相信您可以在视频中看到（至少在复制+粘贴代码后才看到），第二个RadMenu（RadMenu1）的z-index值高于第一个，因此FolderMenu的子菜单显示为“在“ RadMenu1”下。 I just slightly tweaked the CSS to the following: 我只是将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>

Excuse the usage of bad names, but you get the idea ;) Then for the RadMenus: 不好意思使用坏名，但您会明白;）然后使用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>

This prevented the behavior that you saw. 这阻止了您看到的行为。 So, thinking back on your original issue, if there for some reason is some inheritance of the z-index going on (which can be checked in the chrome dev tools) it might just be easier to explicitly set the z-index of each RadMenu (or the containing element) as this will guarantee the desired behavior regardless of inheritance since properties set on item itself with higher specificity should prevail. 因此，回想一下您的原始问题，如果由于某种原因正在进行z索引的某种继承（可以在chrome开发工具中检查），则显式设置每个RadMenu的z索引可能会更容易（或包含元素），因为这将保证所需的行为而与继承无关，因为应优先设置在具有较高特异性的项目本身上设置的属性。

Additionally, it might be helpful to read over this " Understanding CSS z-index " article in case the other elements on your page have a z-index set. 此外，如果页面上的其他元素设置了z-index，则通读这篇“ 理解CSS z-index ”文章可能会有所帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用 JS 悬停在其他 div 下的 Div 扩展 - IE8 :¬( - Divs expanding under other divs on hover with JS - IE8 :¬( 网站菜单悬停CSS IE8问题 - Website menu hover css IE8 issue 悬停时的IE8过渡 - IE8 transition on hover 下拉悬停菜单未显示在 IE/Edge 中 - Dropdown hover menu not showing up in IE/Edge 页面在IE7中悬停菜单时会混乱 - Page messes up on hover of menu in IE7 CSS Vertical下拉菜单，当将鼠标悬停到其他菜单时，子菜单显示 - CSS Vertical dropdown menu, When Hover to other menu the submenu shows Hover 效果不适用于 IE8 - Hover effects not working with IE8 奇怪的符号在IE8上弹出，但没有其他浏览器 - Strange symbols popping up on IE8 but no other browser ie8中的内容下的子菜单 - Submenu under the content in ie8 菜单在IE8上无法正常工作 - Menu is not working properly on IE8
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM