html - 使用菜单下方的剑道分离器后，菜单不显示菜单项

Question

当我点击设置菜单项时，我的菜单没有显示元素。在使用剑道 split 器之前，它工作正常。现在，即使在菜单元素上设置了更高的 z-index 后，菜单也不会弹出。

这是我的菜单栏

<nav class="top-bar bottomnav" data-topbar>
        <section class="top-bar-section">

            <ul class="right">
                <li class="has-content-dropdown"><a href="#" data-dropdown="setuplist" title="Setup">
                    <img src="/Content/Images/setup-16x16.png" alt="Setup" />&nbsp;Setup</a>
                    <div id="setuplist" data-dropdown-content class="medium f-dropdown iconlist">
                              @{
                            link="#";
                            }                     
                        { link="/Classification/ClassificationLabel"; }
                        <div class="iconlink">
                            <a href='@link' title="Classification Label" onclick="OnclickPrem(this)">
                                <img src="/Content/Images/labels-72x72.png" /><div>Classification Label</div>
                            </a>
                        </div>
                              @{
                            link="#";
                            }
                        { link="/Classification/Index"; }
                        <div class="iconlink">
                            <a href='@link' title="Classification" onclick="OnclickRPrem(this)">
                                <img src="/Content/Images/Classification-72x72.png" /><div>Classification</div>
                            </a>
                        </div>
                    </li>
      </ul>
       </section>

在此菜单下方使用剑道分离器

@(Html.Kendo().Splitter()
  .Name("vertical")
  .Orientation(SplitterOrientation.Vertical)
  .HtmlAttributes(new { style = "height: 70%;height:78.3vh;" })
  .Panes(verticalPanes =>
  {
      verticalPanes.Add()
          .HtmlAttributes(new { id = "top-pane" })
          .Scrollable(false)
          .Collapsible(false)
          .Content(
            Html.Kendo().Splitter()
                .Name("horizontal")
                .HtmlAttributes(new { style = "height: 100%;" })
                .Panes(horizontalPanes =>
                {
                    horizontalPanes.Add()
                        .HtmlAttributes(new { id = "left-pane" })
                        .MaxSize("300px")
                        .MinSize("250px")
                        .Size("300px")
                        .Collapsible(true)
                        .Collapsed(true)
                        .Content(Html.Action("Tasks").ToString());
                    horizontalPanes.Add()
                        .HtmlAttributes(new { id = "center-pane"})
                        .Content(@<div class="renderbodydiv" style="padding-top: 8px">
                            @RenderBody()
                        </div>);
                }).ToHtmlString()
          );

  })

)

Answer 1

拆分 Pane 隐藏了溢出，因此如果您的菜单位于某个位置，因此它会显示在它所在的 Pane 之外，您需要覆盖负责它的 CSS；你可以试试:

.k-splitter .k-pane {
    overflow: visible !important;
}