RadmenuホバーメニューはIE8の他のRadmenusの下に表示されます

私は、sharepointドキュメントライブラリのフォルダを調べ、そのフォルダに基づいてサブメニュー構造を構築することによって生成するラドメニューを持っています。ページ上にコントロールの多くを配置すると、他のコントロールのルートメニューがコントロールのサブメニューに表示されます。誰でもサブタイトルにz-indexのスタイルをプログラムで割り当てて変更することで、それを防ぐ方法を知っていますか？問題の詳細については、添付ファイルを参照してください。このテキストは一般消費のために消毒された。RadmenuホバーメニューはIE8の他のRadmenusの下に表示されます

その他の情報：メニューとサブアイテムメニューをロールオーバーすると、他のメニューを正しくカバーしているため、表示されません。しかし、2回目のロールオーバー時には、あたかもz-indexが大きいように、確実に見せてくれます。

これらのコントロールはそれぞれ独自のWebパーツにありますが、重要ですか？彼らはz-indexを継承しているのでしょうか？

効果はIEでのみ発生し、Chromeや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ブラウザのバグの一部を再現しております。 IEではなくラジオメニューのエラーのようです。 IEはバグをより早く起こさせます。ここでは、おそらく実際に簡単に再現できるその例はありません。最後に、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>

は、それはそれは、zを定義するのが最良であるかもしれない、あなたのRadMenu年代を設定する方法を見てみると http://youtu.be/oOdJY65l6AA

出典

2011-12-13 Pertinent Info

を台無しにする方法を示す画面キャプチャビデオですそれぞれの索引は、左から右に行くにつれてz値が低くなるようにメニューを定義します。

2番目のRadMenu（RadMenu1）は、最初のものよりも高いz-インデックスを持ち、サブメニューが表示されていることを確認できます。 RadMenu1の下に "FolderMenu"が表示されます。私はちょうど少し次に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-インデックスが設定されている場合は、この "Understanding CSS z-index"の記事を読むと役立ちます。

出典

2011-12-16 17:26:06 carlbergenhem

RadmenuホバーメニューはIE8の他のRadmenusの下に表示されます

答えて

関連する問題