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

Why isn't the document.getElementById().value() function functioning properly within my PHP code?

When working on my PHP code, I included the following: <select class="ht__select" onchange="sorting('<?php echo $id ?>')" id="sorting"> <option value="">Default sorting</option> <option value="low_price">Sor ...

javascriptphphtml

Making the browser refresh the CSS automatically once it has been modified

When updating a CSS file on the server, it's common for many client browsers to continue loading pages using the old cached CSS file for an extended period. After exploring various posts and piecing together different ideas, I have devised what appea ...

phpcsscakephpcachingbrowser-state

Tips for ensuring uniform button height across all cards

I am seeking advice on how to align all the buttons in different cards, despite varying text lengths, to be in the same position at the end of each card. Here is an example of what I am aiming for. Below is my HTML and CSS code: * { margin: 0px; pad ...

htmlcssflexbox

The userscript will keep the window open as long as it remains inactive

Hello everyone, I'm excited to join the StackOverflow community and dive into userscripts for the first time! Putting aside any unnecessary details, I'm encountering a small issue with a script I recently created. (function () { $("#enbut"). ...

javascriptjqueryhtml

Code for dynamic drop down menu and pagination using PHP and HTML

I'm struggling to understand the logic behind adjusting the number of images displayed on my page. I can't seem to select the first option (5) from the dropdown menu. No matter what I choose, it always defaults to showing 10 images. This issue ...

phphtmlpagination

Can you provide me with instructions on utilizing PNGs to create edge masks for an image?

After experimenting with border-image and PNGs to achieve textured borders, I'm curious if there is a method for masking in a similar fashion? I recently came across the Rumchata website which showcases what I have in mind. Their background has a blu ...

htmlcssimagepngmasking

What steps can you take to convert your current menu into a responsive design?

I am currently developing a website using PHP, HTML, and CSS. The site is not responsive, and I want to make the menu responsive. My global navigation and admin interface are not adapting properly as they are designed using tables. Is there a method I can ...

javascriptphpjqueryhtmlcss

Methods for verifying if a file is included in another file, while disregarding any whitespace adjustments

Let's say I have multiple CSS files (a.css, b.css, ..., e.css) and after concatenating and compressing them, I get a new file called compressed.css. Now, I need to verify if each of the original CSS files is included in the compressed.css file. Are th ...

cssfilecompressionminify

Possible revised text: "Exploring methods for verifying elements within a div using Selenium

I have a situation where I need to verify elements within a div by using the following xpaths. The xpath for each item is as follows: Item 1:- //*[@id='huc-last-upsell-rows']/div[1]/div[2]/div[1]/div/div/a/img Item 2:- //*[@id='huc-last-u ...

javascripthtmlselenium

Executing HTTP requests in ngrx-effects

I'm currently working on an Angular REST application using ngrx/effects and referencing the example application available on GIT. I am facing challenges while trying to replace hardcoded JSON data in effects with data from an HTTP REST endpoint. The e ...

htmljsonangularrestjson-server

Tips for integrating semantic HTML with React components

As a newcomer to react, I am eager to establish a strong foundation before delving deep into the language and risking having to backtrack later on. I am curious about how to incorporate semantic HTML in react. Elements such as <header>, <nav>, ...

htmlreactjs

I'm curious if it's possible to effectively navigate within frames on a webpage using Nightmare JS

I'm encountering issues with using Nightmare js to access elements within a specific frame on a webpage that pulls its elements from a separate HTML file. These frames are not iframes, so typical plugins like iframe-manager are not effective in this s ...

htmlnode.jsframenightmare

Using routerLink for linking to multiple components

Below is the anchor tag provided: <a class="uppercase" routerLink="settings/pressure" routerLinkActive="text-success" (click)="closeModal()" > <div class="pad-btm"> PRESSURE </div> </a> I need to include another route ...

htmlangulartypescriptroutesangular-routing

Highlighting the selected tab with an active class

Currently in the process of learning angularJs, I am still new to it and attempting to dynamically add an active class to the recently clicked tab. Within my interface, there are four tabs: insert, view, update & delete. My goal is to apply the active ...

htmlcssangularjs

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

htmlcsspositionheightabsolute

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss

Ensure alignment of gradients between two divs, even if their widths vary

Among my collection of 10 inline divs, each one boasts a unique width and color gradient. While the 45-degree lines are uniform across all the divs, is there a way to ensure that these gradients match seamlessly? I've shared my CSS code snippet below ...

htmlcssgradientrepeating-linear-gradient

Insert an image into a Word document using the addHtml function in PhpWord

Can someone help me with an issue I'm having in PhpWord? I am trying to insert an image into a Word document using HTML code, but it doesn't seem to be working. I am working in Visual Studio Code and the image is located in the 'public&apos ...

htmlphpword

What is the best method for incorporating success icons into my website with vue.js?

Hey everyone, please excuse my lack of expertise as I am a beginner in this field. I'm trying to incorporate success icons into my website using bootstrap or similar tools, but I'm unsure of how to implement the if statement below. If anyone co ...

javascripthtmlvue.jsbootstrap-4

Aligning two lines next to a radio button using HTML and CSS

I'm facing a challenge where I want to align two lines in the middle of a radio button. Despite my efforts, I am able to line up the top line but struggling with the bottom one. I prefer not floating the radio button as it's being styled using a ...

htmlcss