Jquery UI 手风琴子菜单项列表正在被 header div 覆盖

Question

这是我的jsbin https://jsbin.com/dukoqajuce/edit?html,css,js,output

我想做的是在单击主菜单时打开子菜单列表。但是，它确实会弹出，但会被主 div 覆盖。有人能发现问题吗？

这是html代码

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
 <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><div      id="sidebar">
<ul  class="mainmenu">
    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">STATUS</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">General</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!" id="statusNetwork">Network</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Timing</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">GNSS</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">PTP</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Alarms</a></li>
            </ul>

        </li>   <!--End of STATUS li-->
    </div>  <!--End of sidebarElementDiv-->

    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">NETWORK</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">Ethernet</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">SNMP</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Ping</a></li>
            </ul>
        </li>
    </div>

    <div class="sidebarElementDiv">
        <div class="systemStatusWarning"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">NTP</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP Daemon Status</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP Associations</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP Config </a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP MD5 Security Key </a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP Autokey</a> </li>
            </ul>
        </li>
    </div>

Answer 1

您需要删除 .sidebarElementDiv 上的 z-index。当 ul 显示时，它会导致子菜单出现在下方。

Jquery UI 手风琴子菜单项列表正在被 header div 覆盖

Jquery UI Accordion's submenu item list is being overriden by the header div

css

jquery

jquery-ui

jquery-ui-accordion