Menu is not showing menu items after using kendo splitter below menu

Question

My menu is not showing items when I click on the setup menu item. Before using the kendo splitter it worked fine. Now the menu doesn't pop up even after setting a higher z-index on the menu element.

This is my menu bar

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

below this menu an using kendo splitter

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

Splitter panes hide the overflow, so if your menu is in a position so it would show outside of the pane it is in, you need to override the CSS responsible for that; you can try with:

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