title: Radmenu hover menu shows up under other Radmenus in IE8
body: <p>I have a radmenu that I generate by examing sharepoint document library folders and building out a submenu structure based on the folder. 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 <code>z-index</code> to the sub menus? See the attached file for a better understanding of the problem. The text was sanitized for public consumption.</p>
  
  <p>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 <code>z-index</code> is larger.</p>
  
  <p>These controls are each in their own webparts, does that matter? Maybe they're inheriting <code>z-index</code>?</p>
  
  <p>The effect only occurs in IE, not in Chrome or Firefox.</p>
  
  <p>My ascx: (customItem is the submenu), these css classes are applied programmatically in code to the root item and the submenu items.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .CustomItem
  {
       z-index:99999;
  }
  
  .rootItem
  {
      text-align:center !important;
      text-decoration:none !important;
      z-index:-1;
  }
  .CustomItem:hover
  {
   text-decoration:none !important;  
  
  }
  &lt;/style&gt;
  &lt;div id="section" runat="server" &gt;
  &lt;telerik:RadMenu ID="FolderMenu" runat="server"&gt;
  &lt;/telerik:RadMenu&gt;
  </code></pre>
  
  <p><img src="https://www.telerik.com/ClientsFiles/320883_menuZindexProblem.JPG" alt="screenshot"></p>
  
  <p>Here is an update: I have reproduced some of bug in the Chrome browser. It seems like an error with the radmenu and not IE. IE just makes the bug happen more quickly.
  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.</p>
  
  
  
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /&gt;
  &lt;style type="text/css"&gt;
     .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;  
  
   }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;telerik:RadScriptManager ID="RadScriptManager1" runat="server"&gt;
      &lt;Scripts&gt;
          &lt;%--Needed for JavaScript IntelliSense in VS2010--%&gt;
          &lt;%--For VS2008 replace RadScriptManager with ScriptManager--%&gt;
          &lt;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" /&gt;
          &lt;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" /&gt;
          &lt;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" /&gt;
      &lt;/Scripts&gt;
  &lt;/telerik:RadScriptManager&gt;
  
  &lt;script type="text/javascript"&gt;
      //Put your Java Script code here.
  &lt;/script&gt;
  
  &lt;telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"&gt;
  &lt;/telerik:RadAjaxManager&gt;
  &lt;div&gt;
      &lt;telerik:RadMenu runat="server" ID="FolderMenu" cssclass="CustomItem" &gt;
          &lt;Items&gt;
              &lt;telerik:RadMenuItem Text="Item1" &gt;
                  &lt;Items&gt;
                      &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                       &lt;Items&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;/Items&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                  &lt;/Items&gt;
              &lt;/telerik:RadMenuItem&gt;
          &lt;/Items&gt;
      &lt;/telerik:RadMenu&gt;
      &lt;br /&gt;
      &lt;telerik:RadMenu runat="server" ID="RadMenu1" cssClass="CustomItem"&gt;
          &lt;Items&gt;
              &lt;telerik:RadMenuItem Text="Item1" &gt;
                  &lt;Items&gt;
                      &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                       &lt;Items&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;/Items&gt;
                      &lt;/telerik:RadMenuItem&gt;
  
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                  &lt;/Items&gt;
              &lt;/telerik:RadMenuItem&gt;
          &lt;/Items&gt;
  
  
      &lt;/telerik:RadMenu&gt; &lt;br /&gt;
      &lt;telerik:RadMenu runat="server" ID="RadMenu2" cssClass="CustomItem"&gt;
          &lt;Items&gt;
              &lt;telerik:RadMenuItem Text="Item1" &gt;
                  &lt;Items&gt;
                      &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                        &lt;Items&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;/Items&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                  &lt;/Items&gt;
              &lt;/telerik:RadMenuItem&gt;
          &lt;/Items&gt;
  
  
      &lt;/telerik:RadMenu&gt;
      &lt;br /&gt;
      &lt;telerik:RadMenu runat="server" ID="RadMenu3" cssClass="CustomItem"&gt;
          &lt;Items&gt;
              &lt;telerik:RadMenuItem Text="Item1" &gt;
                  &lt;Items&gt;
                      &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                        &lt;Items&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;/Items&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                       &lt;telerik:RadMenuItem Text="sub item1"&gt;
                      &lt;/telerik:RadMenuItem&gt;
                  &lt;/Items&gt;
              &lt;/telerik:RadMenuItem&gt;
          &lt;/Items&gt;
  
  
      &lt;/telerik:RadMenu&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Here is the screen capture video showing how it messes up
  <a href="http://youtu.be/oOdJY65l6AA" rel="nofollow noreferrer">http://youtu.be/oOdJY65l6AA</a></p>