In Internet Explorer 8, the Radmenu hover menu may appear below surrounding Radmenus

Utilizing a radmenu, I am able to dynamically generate a submenu structure by examining folders in sharepoint document libraries. However, when placing multiple controls on the page, the root menu from other controls overlaps with the submenu of the current control. Is there a way to prevent this issue by programmatically adjusting the z-index style for the sub menus? Refer to the attached file for a clearer understanding of the problem (sanitized for public viewing).

Additional Information: Upon hovering over the menu and displaying the subitems, they cover other menus correctly without showing through. But upon a second hover, it seems like the issue occurs as if its z-index is higher.

Are these controls each within their own webparts affecting the behavior? Could they be inheriting z-index properties?

This anomaly appears only in Internet Explorer, and not in Chrome or Firefox.

The CSS classes mentioned are applied programmatically in code to both the root item and submenu items within my ascx:

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

An update: While initially reported in IE, I have reproduced the bug in the Chrome browser as well. It seems to be an error specific to radmenu, where IE simply accelerates the occurrence of the bug. Below is an example showcasing the issue which can be easily replicated, along with a video demonstrating how the z-index affects the display.

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

Refer to the screen capture video linked below illustrating how the z-index causes problems: http://youtu.be/oOdJY65l6AA

htmlcssinternet-explorertelerik

Answer №1

After reviewing the setup of your RadMenu's, it seems that defining a z-index for each one could be beneficial. Consider assigning lower z-index values to menus from left to right to avoid overlapping.

In the video you provided (which I observed while examining your code), it appears that the second RadMenu (RadMenu1) has a higher z-index than the first one, causing the sub-menu from FolderMenu to be positioned "under" RadMenu1. A simple adjustment to the CSS can address this issue:

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

Please excuse the use of placeholder names, but the concept remains clear. For the 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>

By implementing these changes, the undesirable behavior you witnessed should be resolved. If there is any z-index inheritance occurring (which can be assessed using Chrome Dev Tools), explicitly setting the z-index for each RadMenu or its container may provide a more reliable solution. Properties defined on the specific item with higher specificity should take precedence over inherited values.

For further insight, consider referring to the "Understanding CSS z-index" article, especially if other elements on your page have z-index assignments in place.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the device's width and height with material-ui

Currently, I am attempting to specify the width and height for only the (Iphone 7 Plus) within my project using withStyles. import { withStyles } from "@material-ui/core"; I have tested the following code: "@media (width: 414px) and (height ...

cssreactjsiphonematerial-ui

The static files are being received by Django but are not functioning properly

I've been working on a project using django 1.7, and below is my settings.py configuration: STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "assets"), ) STATIC_ROOT = "absolute/path/to/static" In the 'assets&apo ...

javascripthtmlcsspython-2.7django-1.7

Add to and subsequently remove the possibility of deleting that element

I encountered an issue while moving elements from one div (x) to another div (y). The problem is that the elements in div x are deletable, but once they are copied to div y, they cannot be deleted. Here is the initial state: After deleting Filter 1, the ...

javascriptjqueryhtmlcss

Issues with CSS properties not functioning correctly within the class.col function

When attempting to apply specific CSS properties to a particular area (e.g., "Dashboard") by assigning the class name "main" to the div.col function in the HTML, I encountered an issue where the CSS property applied affected the entire page. The following ...

javascripthtmlcssbootstrap-4

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

I encountered an issue in Chrome and Explorer while attempting to set a CSS property for a pseudo element :after. (I'm trying to create a styled burger nav icon) The error message I received was: 'Unknown property name' This happened wh ...

javascripthtmlcss

Learn the process of creating various themes with Tailwind CSS

When exploring Tailwind CSS, it appears that specific colors need to be specified in classes like this: <div class="bg-yellow-200 dark:bg-gray-800"></div> However, I am interested in offering 10 different themes for users to choose f ...

htmlcsstailwind-css

What is the process for requesting a css file?

My CSS file is pretty lengthy, with over 3000 lines (yes, it's a tad excessive). I'm looking to organize them in alphabetical order so I can easily locate properties. Using Ctrl+F simply tires me out because of the abundance of similar selectors. ...

css

Generating a Popup Alert with a DIV

Looking at this instance: HTML / CSS Popup div on text click I am curious about how to have this display on the main page upon initial visit to the website. I prefer it to load automatically without requiring a button click, and once the content is read, ...

htmlcsspopuponload

Strategies for making a child div fade out when the parent div is hovered over

I have a div with the class name ordershape and inside it, there is another div called fad-res. My goal is to display the corresponding fad-res when I hover over a specific ordershape, while hiding the other divs. <div class="ordershape"> & ...

javascripthtmlcss

Top strategies for avoiding element tampering

What is the best solution for handling element manipulation, such as on Chrome? I have a button that can be hidden or disabled. By using Chrome's elements, it is possible to change it from hidden/disabled to visible/enabled, triggering my click functi ...

javascriptjqueryhtmldom

Is there a way to locate multiple buttons on a webpage that have the same id and field name but varying values using selenium?

On my webpage, I am looking to interact with four submit buttons. All four buttons have identical Id and name attributes, with the only difference being their values. Is it possible to locate and handle these elements using Selenium WebDriver? (Consideri ...

user-interfaceseleniumselenium-webdriverhtmlui-automation

Tips for resolving: 404 error when attempting to load a popup using Ajax

I am new to RoR, so I might be missing something. I am struggling with loading a popup through Ajax when a button is clicked. Every time I attempt it, I encounter an error related to the Ajax method as shown below. I believe my syntax is correct. I have ...

htmlruby-on-railsrubyselecthaml

Insert fresh user information into the div

Learning JavaScript is a challenge I'm tackling. I have a question that may seem trivial, but any assistance would be greatly appreciated. I currently have this code: Javascript <script type="text/javascript"> function fn(){ var Name = ...

javascripthtml

Is there a way to retrieve the aria-label attribute value from this specific WebElement?

When utilizing Java Selenium, I have access to a WebElement object that corresponds to the following HTML node: <td role="gridcell" class="mat-calendar-body-cell ng-star-inserted" style="width: 25%; padding-top: 7.14286%; paddin ...

javahtmlselenium-webdriverdomselenium-chromedriver

Issue with border spacing functionality

I'm having some difficulty with my border spacing in CSS. No matter what size I specify, it doesn't seem to have any effect. I just want to use a border for the top line. Here is my CSS: p { border-spacing: 5000px; text-align: right; ...

javascripthtmlcss

The background image does not appear on the animated div until the browser window is resized

Encountering an unusual problem - I have styled a div element using CSS to be initially hidden: .thediv { width: 100%; height: 87%; position: fixed; overflow: hidden; background-image: url(pics/FrameWithBG1280.png); background-attachment: fixe ...

jquerycssbackground-imagevisibilitywindow-resize

Tips for avoiding duplicates when searching with the simple HTML DOM parser

Is there a way to exclude duplicate content from an HTML page using the simple HTML dom class? For example, if you check out this link: http://www.gutenberg.org/wiki/Category:Agriculture_Bookshelf, you'll notice that the term Forestry appears twice. ...

phphtmlhtml-parsingsimple-html-domhtml-parser

Extraction of Canonical URLs

I am completely new to VBA programming and I need assistance with extracting links related to specific keywords from a website. My goal is to have these sourced links as the final outcome for all keywords in my list using a VBA program. The code I've ...

htmlexcelvbacanonical-linklocation-href

Enhance the CSS styling for the React-Calendly integration in a React project

I am trying to customize the CSS of an Inline Widget called React Calendly. I have attempted to use React Styled Component Wrapper, Frame React Component, and DOM javascript but unfortunately, the design changes are not reflecting as desired. Specifically, ...

javascriptcssreactjsstyled-componentscalendly

Concealing option value based on ng-if conditions in AngularJS: A guide

I am designing an Input form with two input fields that need to be compared and values displayed if a certain condition is met. The input fields are: <td class="td_label"><label>Client Age :</label></td> <td class="td_input"> ...

javascripthtmlangularjsangular-ng-if